Unable to use the @apply in vue <style module>

[niuheshui]

os: windows10

$ pnpm list
Legend: production dependency, optional only, dev only

vite-vue-starter@0.0.0 ~/vitejs-vite-scp4mdee (PRIVATE)

dependencies:
vue 3.5.27

devDependencies:
@tailwindcss/vite 4.1.18
@vitejs/plugin-vue 6.0.3
tailwindcss 4.1.18
vite 7.3.1

https://stackblitz.com/edit/vitejs-vite-scp4mdee?file=src%2FApp.vue

[rozsazoltan]

Is the error message a VS Code warning or a Tailwind CSS compiler error? It is not clear from the question what kind of error it is or what exactly is being reported.

If it is a VS Code warning, this could be a relevant answer.

• Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply"

If it is a compilation error, then you need to know that starting from v4, you also have to use @reference for CSS modules.

• How to use @apply in Tailwind v4?
• Use Vite aliases with TailwindCSS @reference directive

package.json

// package.json
{
  "imports": {
    "#tailwind.css": "./assets/styles/css/tailwind.css"
  },
} 

Header.vue

<style>
@reference "#tailwind.css";

header {
  @apply bg-neutral-0;
}
</style>

[Tilakmahajan]

Hi 👋

When using Tailwind v4 with Vue <style module>, @apply does not work automatically because CSS modules are scoped and do not inherit Tailwind utilities.

In v4, you need to explicitly reference your Tailwind file using @reference.

Example:

<style module lang="postcss"> @reference "#tailwind.css"; .button { @apply bg-blue-500 text-white px-4 py-2 rounded; } </style>

Make sure:

1. You have defined the import alias in your package.json:

{
"imports": {
"#tailwind.css": "./src/assets/styles/tailwind.css"
}
}

2. You are using lang="postcss".

3. @tailwindcss/vite is properly configured in your Vite config.

After that, restart your dev server.

Without @reference, @apply will fail inside CSS modules in v4.

Let me know if this resolves it 👍

[rozsazoltan]

Reference:

• Unable to use the @apply in vue <style module> #19598 (comment)

[niuheshui]

Hello, I tried the solution you mentioned, but it still doesn't work. You can check this demo to see if I did something wrong

https://stackblitz.com/edit/vitejs-vite-t9thoott?file=src%2FApp.vue

[rozsazoltan]

It seems that in the StackBlitz example, the presence of the module and lang attributes is causing it not to work. When these are removed, it works correctly. lang="postcss" was previously used only for nicer formatting in VSCode, but in fact the code legitimately has nothing to do with PostCSS anymore, since the Vite plugin makes it unnecessary.

The question is whether this behavior comes from StackBlitz, Vite, or Vue - I'll test it locally later as well.

It seems that using @tailwindcss/postcss instead of @tailwindcss/vite resolves the issue. So I would start investigating in the Vite (or Vite plugin) direction. (So far, however, I've only tested it on StackBlitz, which is an additional abstraction layer and can introduce various anomalies.)

[niuheshui]

Yes, using @tailwindcss/postcss can solve this issue, possibly the issue is with @tailwindcss/vite