Tailwind classes applied via MDC component are not generated

[stijns96]

Environment

• Operating System: Darwin
• Node Version: v22.15.0
• Nuxt Version: -
• CLI Version: 3.29.3
• Nitro Version: -
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

v3

Reproduction

::steps{level="4" class="[&>h4]:text-base"}

#### Test

::

Description

When adding a class to an MDC Vue component rendered, the class is correctly applied to the resulting HTML element. However, Tailwind doesn’t generate the corresponding styles, it seems Tailwind never “sees” these dynamically applied classes.

If I manually apply the same class inside app.vue, the styles are generated as expected, which confirms that Tailwind is functioning correctly but simply not detecting the class when it’s applied through the MDC-rendered component.

Not sure tho wether this is due Nuxt UI, Nuxt Content or Tailwind

Additional context

No response

Logs

[tegola]

Got the same issue after upgrading from 2.x to 3.7.1. Neither I'm sure whether this is related to Nuxt Content, Nuxt Tailwind or Tailwind itself. There is a related issue on Tailwind's github.

[aryamaddel]

Cross-posting from my related issue #3319: The config tweak suggested by @farnabaz

https://github.com/nuxt/content/issues/3319#issuecomment-2827938282

fixed the prose styling regression there. worth a shot!

[farnabaz]

Have you tried to add content directory? Just like what we have in Content module docs project

@source "../../../content/**/*";

[tegola]

The @source "..." syntax is tailwind 4 only, isn't it? I'm using Nuxt Tailwind 6.14, which still uses Tailwind 3.

[farnabaz]

I see, As you are using tailwind 3 try adding content files to tailwind.config file. Checkout https://tailwindcss.nuxtjs.org/tailwindcss/configuration#default-configuration

!! Content module used to add these configuration and handle tailwind v3 but this no more the case and you need to tell tailwind v3 to check the content files for classes

[tegola]

• This syntax:

content: {
    files: [
      "{srcDir}/content/**/*.md",
      ...
    ]
  },

ends up with this error:

WARN  warn - The glob pattern {srcDir}/content/**/*.md in your Tailwind CSS configuration is invalid.
WARN  warn - Update it to srcDir/content/**/*.md to silence this warning.

• Changing {srcDir} into srcDir makes no sense since it would be treated as the dir name, but I tried anyway, thinking there was some kind of magic parameter name: doesn't work.

• Using ./content/**/*.md doesn't work either.

• Specifying the relative option also doesn't work:

content: {
    relative: true,
    files: [
      "./content/**/*.md",
      ...
    ]
  },

[farnabaz]

@tegola Is your repository public? Or can you share a simple reproduction?

[tegola]

Sorry for the delay. I cannot share my repo neither I got spare time to prepare a reproduction right now, sorry. I'll try to find some time to provide you one next week.