[v4]: How to set important as the tailwind.config.js in new Tailwind v4

[Nayeem-XTREME]

In v3, I have to use important: "<parent_id>" so that tailwind overrides the styles of some third-party library (like: Material UI). How can I setup the same thing in tailwind v4?

In v3, after setting important: "<parent_id>", output becomes:

#<parent_id> .flex {
    display: flex;
}

[wongjn]

As per the documentation:

Note that not every feature of the JS config is supported in v4.0. Options like corePlugins, important, and separator will likely not be supported at all in the stable v4.0 release.

Although this is talking about the JS config, I could not find any mention of an equivalent important option in the documentation.

[Nayeem-XTREME]

Hmm, I have seen that. But what will be the alternative or workaround?

[cossssmin]

To set everything to be !important in v4 I understand you do:

@import "tailwindcss" important;

Haven't tested but maybe it works when you import third party CSS too?

[Malivuca]

I was having some issues while using Tailwindcss v4, mui v6.4.1 and vite as a bundler, and @cossssmin solution worked, but not so well as with tailwind's v3 important: "#root".
Although simple, now EVERY tailwindcss has a important flag attached to it, and it might conflict with some mui styles.
The mui team is currently working at a possible solution to integrate tailwindcss v4, and you can check it out here