@tailwindcss/postcss v4 Features

[jeissler]

I am trying to setup tailwind with Vite and Vue for using @apply rules inside of SFCs but am having trouble getting the newer utilities to work such as inset-0. The older utilities all work as @apply rules and I'm not entirely certain where the issue is; I think is an issue w/ @tailwindcss/postcss which is needed still in my setup w/ v4. With only the vite plugin as shown in the docs things don't work since I'm using postcss (.pcss) files and also postcss inside of my SFCs. Any help with this is much appreciated because I am loving v4, nice work!

"tailwindcss": "^4.1.4",
"@tailwindcss/postcss": "^4.1.4",
"@tailwindcss/vite": "^4.1.4",
"vue": "^3.4.19"

The specific error I get is

[plugin:vite:css] [postcss] Cannot apply unknown utility class: inset-0

[wongjn]

You should generally only use @tailwindcss/postcss or @tailwindcss/vite, not both.

You probably 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

[jeissler]

@wongjn thanks for the info, I did try and use @reference but it didn't solve it; all the older utilities still work its only the newer ones that fail with that error. Interesting @apply is frowned on, I wonder then how we are supposed to create structured classes w/ v4 as thats what I always used to do when I used tailwind—for now I guess I will do as suggested in those posts and reuse utility littered html

[wongjn]

Try using @tailwindcss/postcss or @tailwindcss/vite, not both. Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[jeissler]

For more info on the inset-0 utility failing using @apply both of the plugins do the same thing given a Vue SFC that includes it. In my case I want to use .pcss and other postcss tools and am hopeful this might work at some point and become more performant. For anyone finding this the ultimate answer is above in the posts: simply don't use @apply anymore

[philipp-spiess]

@jeissler Hey! As @wongjn already said please add a git repo that reproduces the behavior, it's hard to diagnose the issue for us otherwise. inset-0 does need a @reference since it relies on the --spacing theme value, so one thing you can try is to add a @reference "tailwindcss"; in the same file that does the @apply.