Production Gatsby blog not rendering TailwindCSS classes in MDX files

SOLVED IT!

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.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top