Tailwind v4 – Important Modifier Style Change?

[weilinzung]

Hey folks — just looking to confirm something and get your thoughts:

In Tailwind v3, we’ve always used the important modifier like this:

!bg-red-500'

But in the v4 docs, it now shows:

bg-red-500!

It looks like postfix ! is now the recommended way to apply !important. Is this the new standard going forward?

Questions:

• Is bg-red-500! now preferred over !bg-red-500?
• Are there specific reasons why this change was made?
• Any gotchas or tooling issues people have run into?
• Should we start migrating our codebase to use the postfix syntax?
• Appreciate any confirmation or insight 🙏

[wongjn]

The postfix ! to apply !important is the new standard going forward.

• bg-red-500! is now preferred over !bg-red-500.
• This change was made so that the exclamation mark (!) is at a consistent spot for any class name¹. For example, with variants in v3, hover:!bg-red-500, the exclamation mark is in the middle of the class name. Now, it is always at the end: hover:bg-red-500!.
• I personally haven't run into any gotchas or tooling issues.
• You can start migrating your codebase to use the postfix syntax. The upgrade tool might be able to do this for you. The documentation talks about v3 to v4, but it also migrates v4 to v4 in that it will change deprecated syntax to modern equivalents.

Footnotes

1. https://discord.com/channels/486935104384532500/1397349340770598922/1397854131435081768 ↩

[wongjn]

You could make a temporary project, copy the relevant template files, run the upgrade tool in that project and then copy the changed files back.

[weilinzung]

@wongjn Wouldn’t renaming the scss file to css also allow the component html and ts files to be updated?

[wongjn]

That could work if the Scss file(s) don't contain any Sass syntax.

[weilinzung]

@wongjn what if just htmls and ts, that no sass or css files? Would the script still able to run?

[wongjn]

I'm not sure - it might say something about not finding a CSS file. If that's the case, you could make a temporary project, copy the relevant template files, run the upgrade tool in that project and then copy the changed files back.