Tags
Attrs does not like '/' characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.
.cinematic { @apply aspect-[2.39/1]; }
Given the following markdown with attrs added to the image and to the paragraph block.
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.wayl.one/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]} ![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.wayl.one/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic} {.cinematic} ![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.wayl.one/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)
We get the following output with only the middle one working correctly.
{.aspect-[2.39/1]}
Note
The inline version of .cinematic
works, but .aspect-[2.39/1]
does not,
it turns into text after the image. The block version with the class
before the image applies to the paragraph, not the image.