∀s∈ℂ\{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢ
∀s∈ℂ\{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢ
PostsComments
NNuxt
Created by ∀s∈ℂ\{1}, ζ(s)=Σₙ₌₁⁺ⁱⁿᶠⁱⁿⁱᵗʸ n⁻ˢ on 5/24/2025 in #❓・help
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?
4 replies