[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