Why aren't some Tailwind styles applying to my Nuxt Content blog?

I recently created Prose components for this blog. For some reason, a few styles seemed to be getting ignored.

The problem was Tailwind's tree-shaking, which removes unused class names. Generally this is a great feature that decreases file size. It's also a solid suspect if your Tailwind styles aren't working as expected.

The Tailwind classes in my ProseA.vue, ProseP.vue, etc components weren't being recognized by the shaking algorithm. Since I wasn't using a few classes like "list-disc" anywhere else, they were being removed.

Solution

You might try transforming your Markdown files, but if you're looking for a quick and dirty solution, it's simple to add them to the safelist in your tailwind.config.js file:

module.exports = {
    ...
    safelist: ["list-disc"],
}

It worked! If you read the previous link... Tailwind says it's a last resort that you should almost never need. But for small, one-off style... well, it's your call.