Tags
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
{.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
This block will 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
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 can we add inline classes.
Pros {.text-green-500 .font-bold .underline} #
- 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
{.aspect-[2.39/1]} {.cinematic} {.cinematic} 
We get the following output.
{.aspect-[2.39/1]}
Note
Both the block and inline version of .cinematic works, but .aspect-[2.39/1] does not, it turns into text after the image.