[v4] @tailwindcss/vite Cannot apply unknown utility class in @apply

[mathias22osterhagen22]

What version of Tailwind CSS are you using?

"tailwindcss": "^4.0.3"

What build tool (or framework if it abstracts the build tool) are you using?

"nuxt": "^3.15.4" with @tailwindcss/vite

What version of Node.js are you using?

v20.18.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://github.com/mathias22osterhagen22/tailwindcss-issue

Describe your issue

I'm having [vite-node] [plugin:@tailwindcss/vite:generate:serve] [VITE_ERROR] Cannot apply unknown utility class: hover:text-primary/70 in my Nuxt project.

My assets/css/main.css:

@import "tailwindcss";

@theme {
    --color-primary: #e4c160;
}

In my component I'm trying to create a custom class that apply tailwind classes:

<style lang="css" scoped>
.my-class {
    @apply text-primary/50;
}
</style>

But impossible to make it work.
I can only use it by writing it directly in the Vue template <a class="hover:text-primary/70">, which is kind of super annoying.

Note:
I as well figured out while during the creation of the reproduction repo, than the original classes (text-2xl) are now as well broken (I didn't have this issue with my original project).
So it seems to be linked with : #16255

[wongjn]

You need to use the @reference directive.

---

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

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

[beiatisi]

You need to use it like this
`<style lang="css" scoped>
@reference "../../assets/css/main.css";

.my-class {
@apply text-primary/50;
}
</style>`

[haibo1997]

Is there a simple way to support @apply in v4? as there are lots of styles that include @apply in my previous v3+vite based project.

[wongjn]

You need to use the @reference directive.

---

As an aside, 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/1890404835888910467

[haibo1997]

Yeah, I should use @reference "../../app.css";, but it seems I need add it to every vue file and deal with the path issues.

[AlexTu2]

https://stackoverflow.com/questions/77443221/the-border-border-class-does-not-exist-if-border-border-is-a-custom-class/79431749#79431749

This might help you out

[Janani-Balasooriya]

https://stackoverflow.com/questions/77443221/the-border-border-class-does-not-exist-if-border-border-is-a-custom-class/79431749#79431749

This might help you out

This worked for me. Thank you!!

[Mahdiyeh]

For whom is working with react 19, Tailwind v4 in 2025:
First, I edited all config files then I installed the canary version: "npx shadcn@canary init"
https://ui.shadcn.com/docs/tailwind-v4

[emotionl]

This change is terrible. I choose V3.

[yogeshbabu]

facing similar issue. For me it is not with @apply but with @plugin

[plugin:vite:css] [postcss] D:/Work/Dev/projects/tanstack/app/assets/styles/globals.css:10505:15: Unknown word err.plugin

Anyone has a solution / fix to use with V4 ?

[YutoYasunaga]

Same issue. This change of v4 is terrible.

[johnnyicon]

Anyone have any luck with using @reference in SCSS?

[YutoYasunaga]

No, It's very frustrating working with this poorly documented V4

[YutoYasunaga]

I can't even build with this simple code.

$ tailwindcss -i ./app/assets/builds/input.css -o ./app/assets/builds/final.css --minify
Error: Cannot apply unknown utility class: ml-1

@import 'flowbite';
@import "tailwindcss" important;

@theme {
    --color-primary-light: #047857;
    --color-primary: #065f46;
    --color-primary-dark: #064e3b;
}
@custom-variant dark (&:where(.dark, .dark *));

.svg-inline--fa + span {
  @apply ml-1;
}