[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

[JulianLlanten8]

my solution was:

  <style scoped>
  @reference "@/assets/styles.css";
  
  li {
    @apply bg-white shadow-md rounded-lg p-3 m-2 cursor-pointer w-40 text-center transition-all hover:bg-gray-100;
  }
  </style>

[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;
}

[raf202]

Terrible change. Feels like we're moving backward

[madsem]

v4 is horrible

[rozsazoltan]

Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

You should almost never use it 😬

Reuse your utility-littered HTML instead.

---

Source: @adamwathan, #2, #3

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

[duolabmeng6]

This change is really, really bad. Is there a compatibility program for this?

[kusman28]

✅ Fix

1. Check your main.css

It should only have Tailwind directives, no @import "tailwindcss" or anything like that:

/* ~/assets/css/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

❌ Wrong:
@import "tailwindcss"; /* <-- this triggers your error */

[rozsazoltan]

Without context, this sounds odd. Unfortunately, AI models aren't very reliable with new information. For v3, released in January 2025, @import "tailwindcss"; is absolutely not wrong. The question clearly relates to v4 and the new @tailwindcss/vite plugin. Please don't rely on AI to determine installation steps - it will always mislead you.

• How to install TailwindCSS v4 with Vite
• Tailwind CSS v4: more packages and new Vite support

[rozsazoltan]

Related:

• How to use @apply in Tailwind v4?
• Adding TailwindCSS association to Vue/Svelte/Astro file to disable "css(unknownAtRules): Unknown at rule @apply"