Tailwind preventing basic HTML tags to render properly
Hello, I am having a strange issue with Tailwind in a Nuxt 3 project. The installation and configuration was done following https://tailwindcss.com/docs/guides/nuxtjs.
Tailwind classes (as well as my theme extension custom classes) display properly but for an unknown reason, some of the root HTML tags are not rendering properly (as shown in the image attached). The HTML tags render properly when I disable Tailwind.
Anyone has a clue of how to solve this?
Here's my stack:
"@nuxtjs/tailwindcss": "^6.1.3",
"nuxt": "3.0.0"
2 Replies
I think it's likely just the tailwind reset which is deliberately removing the browser's default styles
OMG! Thanks @danielroe your explanation led me to a feature I wasn't aware of from Tailwind. The Preflight (https://tailwindcss.com/docs/preflight#headings-are-unstyled). I disabled it and the basic tag CSS properties were back.
Knowing this is not a config issue, I can now enable it and define each property as per my client theme requirements.
Thanks!
Preflight - Tailwind CSS
An opinionated set of base styles for Tailwind projects.