Nuxt•4mo ago

CSS modules with Tailwind 4

Hi. Tailwind 4 classes seem not to be applied in CSS modules . I tried the directive @reference from Tailwind, and it is still not working :

<template>
  <div>
    <p class="is-applied">Color is applied.</p>
    <p :class="$style['is-not-applied']">Color is not applied.</p>
  </div>
</template>

<style>
@reference '~/assets/styles/main.css';

.is-applied {
  @apply text-primary; /* is applied */
}
</style>

<style module>
@reference '~/assets/styles/main.css';

.is-not-applied {
  @apply text-primary; /* is not applied */
}
</style>

<template>
  <div>
    <p class="is-applied">Color is applied.</p>
    <p :class="$style['is-not-applied']">Color is not applied.</p>
  </div>
</template>

<style>
@reference '~/assets/styles/main.css';

.is-applied {
  @apply text-primary; /* is applied */
}
</style>

<style module>
@reference '~/assets/styles/main.css';

.is-not-applied {
  @apply text-primary; /* is not applied */
}
</style>

See: https://stackblitz.com/edit/nuxt-starter-6rrn2yxb. According Tailwind documentation (https://tailwindcss.com/docs/compatibility#css-modules), it is not recommended. Tailwind 3 didn't need any @reference directive and it worked with CSS modules. Is it only a issue from Tailwind, or can I fix it with some config from Nuxt?

Compatibility - Getting started

Learn about browser support and compatibility with other tooling.

5 Replies

kapa.ai•4mo ago

Hi @∀s∈ℂ{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about using Tailwind CSS v4 utility classes inside CSS Modules in Nuxt 3, nor about the effectiveness of the @reference directive in this context. The official Nuxt documentation does confirm that CSS Modules are supported and can be used with the module attribute, and Tailwind CSS v4 is supported in Nuxt projects. However, there is no mention of special configuration or compatibility notes regarding Tailwind v4 utilities inside CSS Modules, nor about the @reference directive's behavior in this scenario. The documentation examples for CSS Modules use plain CSS, not Tailwind utilities, and the Tailwind theming and upgrade guides focus on global styles and the new @theme directive, not on CSS Modules usage specifically Nuxt CSS Modules Nuxt UI Theme. If you are experiencing issues where Tailwind v4 classes are not applied within CSS Modules, and the @reference directive does not resolve it, this may be a limitation or a change in how Tailwind v4 processes CSS Modules, but the knowledge sources do not provide a definitive answer or workaround. For now, you may need to use Tailwind classes in global styles or component-scoped styles (not CSS Modules), or consult the Tailwind CSS and Nuxt issue trackers for updates on this specific integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@228857265602560011> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Fedox•3mo ago

Hey @∀s∈ℂ{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢ did you find a solution to use tailwind without that @reference stuff?

∀s∈ℂ\{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢOP•3mo ago

Unfortunately, no. I gave up on using CSS modules with Tailwind.

Fedox•3mo ago

I heard that this is a tailwind v4 only problem i guess

Gaming

Programming

CSS modules with Tailwind 4

Did you find this page helpful?