PostCSS + TailwindCSS 4 throws error on important! and ! modifiers

[LZL0]

What version of Tailwind CSS are you using?
Tailwind: 4.1.11
PostCSS: 8.5.6
NextJS: 15.4.1
Node: 22.x

Describe your issue

./apps/next/src/styles/tailwind.scss

Error evaluating Node.js code
Error: expected ";".
    ╷
111 │   @apply text-black dark:text-white !important;

./apps/next/src/styles/tailwind.scss

Error evaluating Node.js code
Error: expected ";".
    ╷
111 │   @apply text-black! dark:text-white!;

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

[thecrypticace]

Hi! So a couple things:

1. The !important syntax in @apply no longer exists. You should mark each utility itself as important with a ! suffix like in your 2nd example.
2. The specific error you see is because you're using Sass with Tailwind CSS v4 which is not recommended. It will not work with IntelliSense nor our Prettier plugin and you're very likely to run into other issues with it as well.

If you still absolutely want to use SCSS you can try using interpolation to "escape" the !. I'm like 80% sure this will work:

.foo {
  @apply #{text-black!} #{dark:text-white!};
}

aside: this is how the !important marker has to be escaped in v3 when using SCSS.

[LZL0]

@thecrypticace Thanks for the quick reply. After digging in, it looks like all variant-prefixed @apply usage has been deprecated. This is a major issue for teams with large, content-heavy platforms that relied on dark:, hover:, and similar variants—patterns that were stable for nearly 5 years.

Removing !important and variant support inside @apply breaks real-world implementations at scale. The suggested Sass workaround isn’t viable for large teams.

Community behavior reflects this: Tailwind v3.4.17 had 7.2M downloads this week vs. just 2.7M for v4.1.11, over seven months post-release a 2.6× gap that shows many are staying on v3 due to breaking changes and no clear migration path.

What’s worrying is that it’s not hobbyists, it’s the enterprise teams, early adopters, and plugin contributors who are locked in. For them, @apply is essential for scalable, co-located styling.

[thecrypticace]

1. Variants still work and have never not worked: https://play.tailwindcss.com/OS0BkmjF3x?file=css
2. As I stated above !important was replaced with adding ! to each utility. This also worked in v3 except the ! was at the beginning of the "base" utility. (and this prefixed syntax still works in v4 for backwards compatibility).

[LZL0]

The specific error you see is because you're using Sass with Tailwind CSS v4 [which is not recommended]

I see it now.

Variants still work and have never not worked: https://play.tailwindcss.com/OS0BkmjF3x?file=css

Thank you!