MDX

YAS! I added MDX support following this tutorial.

// you can write JSX in your Markdown! The following button is this
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-5">
  test
</button>

I’m using Tailwind btw, discovered it with this Gatsby starter. Looks like inline styling… but it’s not.

Thanks to VSCode I was able to quickly find and replace everything from markdownRemark to mdx plugin. Now I’m able to combine JSX within my new MDX files! Cool huh!? DX level up :D

EDIT:

Styling classes from Tailwind didn’t actually work in these .mdx files… in production. It did in dev environment.

I answered myself. This is what I found out:

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 so that quick changes reflect immediately.

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 and 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. For instance, the button above had the .mt-5 class described but not the blue color, etc. This class is used somewhere else over this site in a .js file.

I feel good. At first I was totally baffled by this issue, but some quick devtools inspection enlightened me!

EDIT 2 (2023)

After a while of inactivity on this site I realized that somehow this was broken again. Adding content became a second priority since I was stubbornly trying to fix this issue.

Enter the rabbit hole 🕳️🐇

I started even reading this post again and googling only to find TailwindCSS installation guides, of course none of it helped. I even went ahead and updated major versions of my deps, following migration guides.

It was until I realized VSCode was not auto-completing the classes involving colors. The problem was that I couldn’t get my head out of the purging problem, I had to think in a more specific way. Analyzing the classes that were missing, they turned out to be only colors. So checking the tailwind.config.js file I had a colors object describing only one mysterious darkGray which I didn’t use anywhere on the site 🤷.

So the fix was finally very easy (as usual with this kind of thing): just wrap that color object into an extend object so that instead of replacing all the colors Tailwind brings, add the one (that I’m not using lol).

// tailwind.config.js
theme: {
    extend: {
      colors: {
        darkGray: '#0C0C0C'
      }
    },

    {/*...*/}
}