Published
All published posts
markdown split panel
Make MinIO Access Key
I’ve been back to putting some images on my blog lately and thinking about
making them a bit thinner through the use of aspect ratio for simplicity. I’m
leaning pretty heavy on tailwindcss these days due to some weird quirks of
markdown-it-attrs I cannot have slashes in classes from markdown so I made a
.cinematic class to achieve this.
.cinematic {
@apply aspect-[2.39/1];
}
Example
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.
{.aspect-[2.39/1]}
{.cinematic}
{.cinematic}

We get the following output with only the middle one working correctly.
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.
markata 0.8.0
markata 0.8.0
Calendar data could not load. Try again.
