A small improvement to my blog today. I was checking out my [[ now ]] post and noticed that lists have left padding but no discs or numbers. I popped open my tailwind/app.css added these lines and rebuilt.

#post-body li {
  @apply list-disc;
}
#post-body ol {
  @apply list-decimal;
}

And rebuild, which I actually do with [[ casey-just ]], but showing the command here for clarity.

npx tailwindcss --input tailwind/app.css --output static/app-39.css

WHY the applies

{.bg-blue-900 .border-r-8 .border-black .rounded-xl .max-w-xl .p-6 .font-bold} Dude, you know that @apply is an anti-pattern in tailwind right?

{.bg-green-900 .border-l-8 .border-black .rounded-xl .max-w-xl .p-6 .ml-auto .mr-0 .font-bold} Ya

{.bg-blue-900 .border-r-8 .border-black .rounded-xl .max-w-xl .p-6 .font-bold} WTF are you doing? this is all wrong.

{.bg-green-900 .border-l-8 .border-black .rounded-xl .max-w-xl .p-6 .ml-auto .mr-0 .font-bold} I use @apply in my blog because the html is generated by a markdown library, and changing the html at this low level would be quite difficult, this is easy.

Before

image

After

image