[bug?/v4] Cannot use @apply in css module in Vue SFC

[kakkokari-gtyih]

Summary

We can't use @apply inside of css module in Vue SFC, even if we put @reference rule. (Vite Plugin)

Minimal Reproduction: https://github.com/kakkokari-gtyih/tailwind-v4-vue-module-repro

Details

Adam pointed out that @apply in Vue SFC is possible by using @reference rule (#16429 (comment)), but it seems not the case in CSS Module in Vue SFC.

As mentioned in Adam's reproduction, this works:

<template>
    <h2 class="scopedApplyClass text-2xl font-bold">The color of this text should be blue (--color-custom)</h2>
</template>

<style scoped>
@reference '../tailwind.css';

.scopedApplyClass {
    @apply text-custom;
}
</style>

However, this is not working:

<template>
    <h2 class="text-2xl font-bold" :class="$style.moduleApplyClass">The color of this text should be blue (--color-custom)</h2>
</template>

<style module>
@reference '../tailwind.css';

.moduleApplyClass {
    @apply text-custom;
}
</style>

[kakkokari-gtyih]

Should I write this as issue as well?

[kakkokari-gtyih]

Hi, it's been a while since I file this bug on discussion, and I haven't gotten any direction whether it should be moved to an issue or at least some insights. Thanks!

[wongjn]

Seems like the build system doesn't use Vite plugins on CSS modules. This means the Tailwind CSS syntax doesn't get processed:

Furthermore, as per the documentation:

[…] we don't recommend using CSS modules and Tailwind together if you can avoid it.

Also, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

Instead, consider writing all class names inline:

 <template>
-  <h2 class="text-2xl font-bold" :class="$style.moduleApplyClass">The color of this text should be blue (--color-custom)</h2>
+  <h2 class="text-2xl font-bold text-custom">The color of this text should be blue (--color-custom)</h2>
 </template>

-<style module>
-@reference '../tailwind.css';
-
-.moduleApplyClass {
-    @apply text-custom;
-}
-</style>