[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]

That's the point of Tailwind - to style your elements on your elements, not in a CSS file.

@apply is a stopgap and shouldn't be used more than once or twice per project.

---

Source: Moni

A ton of confusion amongst Tailwind users comes from not realizing
that if you are using CSS modules, or <style> blocks in
Vue/Svelte/Astro, your CSS pipeline separately for every single one of
those blocks.

50 Vue components using <style> means Tailwind runs 50 separate times.

---

Source: @adamwathan

For the best build performance, don't use Tailwind features in CSS
modules or Vue/Svelte/Astro <style> blocks, just rely on CSS
variables.

<template>
  <div>
    <h1>Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

<style>
  div {
    background-color: var(--color-blue-500);
  }
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(2 * var(--spacing));
  }
</style>

---

Source: @adamwathan

Or even better, just use the classes in your markup like you're supposed to

<template>
  <div class="bg-blue-500">
    <h1 class="mb-2 text-3xl font-bold">Hello world!</h1>
    <p>Lorem ipsum dolor sit amet ...</p>
  </div>
</template>

---

Source: @adamwathan

The same thing happens by the way by just importing multiple CSS files in JS. Don't do that — import them all into one CSS file and load that one file in JS instead.

---

Source: @adamwathan

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