Example mdx file:

<div class="text-[#EF4444] mb-4">#EF4444</div>
<div class="text-[#3B82F6] mb-4">#3B82F6</div>
<div class="text-[#F97316] mb-4">#F97316</div>

When Tailwind classes are used in TSX or JS files, they work, but not when they are used within MDX files.

The classes can be seen in Chrome Dev Tools, but they do not take effect.

What you need to do:

Update TailwindCSS config to scan your mdx files

module.exports = {
  content: [
    `./src/pages/**/*.{js,jsx,ts,tsx}`,
    `./src/components/**/*.{js,jsx,ts,tsx}`,
    "./src/pages/**/*.mdx", // add this line
  ],
  // other configs
};

Ensure that your MDX files are located in a directory that Gatsby is aware of - src/pages

That's it