[v4] Breaking change: When using the important flag, @apply now also make all of the declarations !important

[WouterDeGeringel]

Hi there,

I am trying to upgrade a project from tailwind v3 to v4.

I found that in v4 when using the important flag and then use @apply to inline any existing utility classes into my own custom CSS, these lines get "!important" added to them.

In v3 this was not the so.

I am not sure if this is a bug or an change. If it is intentional, then maybe the upgrade guide should be mention this.

If there is a way to prevent @apply to add the "!mportant" rule, I would love to know.

Regards

[philipp-spiess]

Hey! Yeah the way important works now is that it's a global flag effecting @apply and all utilities I'm afraid. I wonder what kind of issues you run into that require all utilities to have !important but want none of the @apply to use that?

That said, since this is a non-trivial fix and v4 is out for a long time now that this can be considered breaking change in the other way too, I think it's unlikely that this is going to be fixed I'm afraid. Leaving this open for now since we should mention it in the upgrade guide as you said.

[WouterDeGeringel]

Hi @philipp-spiess,

Thanks for your reply.
I understand why this might be a better implementation of the flag.
For my old project is messes things up a little.

I think I will be able to fix it by removing the "important" flag and using css layers, so the tailwind utility layer gets the highest priority over my other styles.

And it will be a good exercise to go over all css that accumulated over all these years...and maybe even convert everything to tailwind.

Regards