tailwind and markdown
━━━━━━━━━━━━━━━━━━━━━

This post is a bit of an experiment to see what I can do. Lets start with a block of pink text. I build my blog with my own static site generator called markata

Date: February 1, 2024

This post is a bit of an experiment to see what I can do. Lets start with a block of pink text. I build my blog with my own static site generator called markata </markata/>

Setup Tailwind for Jinja </tailwind-and-jinja/>

Still Loving Tailwind </still-loving-tailwind/>

```
{.text-pink-500}

This text should be pink

This text should be not pink
```

--------

This text should be pink

This text should be not pink

--------

Now will it work with bulleted lists

```
{.text-pink-500}
This block will be pink

{.text-pink-500}

* Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
* labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
* anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

This block will not be pink.

* Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
* labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
* anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est
```

--------

- Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
- labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
- anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

This block will not be pink.

- Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
- labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
- anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

--------

Inline classes
──────────────

```
Now within a [paragraph]{.text-pink-500} can we add [inline classes]{.text-pink-500 .font-bold .underline}.
```

Now within a [paragraph]{.text-pink-500} can we add [inline classes]

Pros
────

- lorem
- ipsum
- dolor

[Cons]
──────

- lorem
- ipsum
- dolor

Classes on images
─────────────────

Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes we must make new classes in our tailwind input css.

```
.cinematic {
  @apply aspect-[2.39/1];
}
```

Given the following markdown

```
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]}

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic}

{.cinematic}
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)
```

We get the following output.

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>{.aspect-[2.39/1]}

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>

NOTE
│ ```
│ Both the block and inline version of `.cinematic` works, but `.aspect-[2.39/1]` does not, it turns into text after the image.
│ ```