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

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>


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.
Compatibility - Getting started
Was this page helpful?