Using Tailwind CSS Styles in Markdown/MDX content w/@next/mdx?

[colinsteidtmann]

Hi, I have this in my ./page.mdx

# Hello World
<p className="text-100-blue">This is blue text</p>

and I'm using tailwindcss, imported into the global style sheet, set it up as they instructed, etc.

But the styles aren't being applied to my markdown content. I sense that there might be something limiting me, idk, is there anyway to get around this? I know I could wrap the content in a container with className="prose" from @tailwindcss/typography but then I'm kind of limited in my styling.

Help would be kindly appreciated

[wongjn]

Check that the ./page.mdx is covered by the content file globs in the Tailwind configuration.

[colinsteidtmann]

I found the problem. I changed my tailwind configuration from this:

module.exports = {
  (...)
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,md, mdx}",
    "./components/**/*.{js,ts,jsx,tsx,md, mdx}",
    "./content/**/*.{js,ts,jsx,tsx,md, mdx}",
    (...)
};

to this:

module.exports = {
  (...)
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,md,mdx}",
    "./content/**/*.{js,ts,jsx,tsx,md,mdx}",
    (...)
};

A single space between the ',' and 'mdx' was breaking things 🤦‍♂️

[csjui]

You should also use "text-blue-100", not text-100-blue :)

[Elizura]

I am facing the same issue
but it's not the comma this time

[wongjn]

Consider checking the file that contains the code is covered by the content file globs in your Tailwind configuration.

[janvorwerk]

For anyone having the same problem as I did on Next.js with the app router.

I had to change:

content: ["./(app|components)/**/*.{ts,tsx,mdx}"],

to

content: ["./(app|components)/**/*.{ts,tsx,mdx}", "./mdx-components.tsx"],

The problem was that mdx-components.tsx is required to be at the root of the project (above the app folder...) and this was excluded by my initial pattern... 😭

[nathankirk91]

This saved me! thank you!

[heygwangjin]

This saved me too!! thanks!

[NikitaRevenco]

I had a similar issue, I had a glob like this:

  content: ["./posts/**/*.{mdx}", "./src/**/*.{ts,tsx}"]

But removing the curly braces around mdx fixed it!

  content: ["./posts/**/*.mdx", "./src/**/*.{ts,tsx}"]