Using `@apply` with `!important` modifiers in main css files has effects on utility classes

[ace-of-aces]

What version of Tailwind CSS are you using?

v4.1.14

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

@tailwindcss/vite 4.1.14, Vue.js 3.5.22, Vite 7.1.9

What version of Node.js are you using?

v22.20.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

Reproduction URL

https://codesandbox.io/p/devbox/reverent-shadow-9jgrhq

Describe your issue

Hey there, I've run into a kind of obscure bug with the latest versions of TailwindCSS and its Vite plugin.

When having an @apply directive inside a class that applies any utility classes that have a !important modifier on them (e.g. @apply !rounded-none;) inside the main CSS file, the !important modifier is actually being set on the actual utility class instead just being resolved to the class that uses the @apply directive.

Example

@import "tailwindcss";

.foo {
  @apply !rounded-none;
}

Inspecting an element that has the default rounded-none utility class (not using the foo class anywhere):

.rounded-none {
    border-radius: 0 !important;
}

Chrome DevTools also reports this to come from the actual utilities layer:

This leads to some unexpected behaviour where selectors with higher specificity are being overridden by the unexpected !important modifier from the utility class. A visual example of this is in the Codesandbox demo provided above (see App.vue and style.css specifically)

More context

I have noticed this issue while working on shadcn-vue, a Vue port of shadcn/ui: unovue/shadcn-vue#1475.

The issue is not present in shadcn/ui which is using a very similar tailwindcss v4 setup, with the only major difference being that it's based on Next.js and therefore uses @tailwindcss/postcss instead of @tailwindcss/vite. So this might be related to @tailwindcss/vite specifically.

Hope that I provided you with enough details and context on this issue, let me know if there's anything more I can do or if I'm missing something obvious here🙏🏻

[thecrypticace]

This was fixed in #19110 — will be addressed in the next release.

[thecrypticace]

Until there's a release you can use our insiders build which has the fix:

npm install tailwindcss@insiders @tailwindcss/vite@insiders

[ace-of-aces]

Awesome, thank you so much!