I'm working on my Gatsby blog/site based on this Leonids starter. Made some changes to add functionality that fits my needs, including using .mdx files to write pages and posts, so that I can add JS inside MD.
When working and previewing the site with gatsby develop everything looks good. Now when going on production, Tailwind classes that are used in components within .mdx files are not rendered. Tried importing the global.css file which includes @tailwind utilities into an mdx with no luck. Classes appear in the inspector, but don't present any styles in the CSS.
When Tailwind classes are used in tsx or js files, they work. But not when I use them in components that are styled with these classes within mdx files.
So what is really changing when building the prod site and the develop site? I don't really have a clue on what to try next since there are no errors nor warnings whatsoever.
This is the repo to the site. And this is an example of a button not picking up Tailwind's classes.
Why does this happen?
Thank you all! Hope I brought enough info.
Cheers!
For anyone who stumbles upon this issue, what happened was that TailwindCSS uses PurgeCSS to cleanup any unused classes. This cleanup is done on production builds only, at dev, they are always available for quick changes.
I just had to add .mdx to the exclusion list in tailwind.config.js file. Like so:
module.exports = {
purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx", "./content/**/*.mdx"],
...
}
My .mdx files are under ./content/... so I just added the expression to the list so that the purging process considers those files as well.
I realized this was the issue because Tailwind classes worked in js files and some classes where loaded and visible in chrome devtools.