[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?

[soheilous]

Thanks buddy, it is working like a charm. Even the extension.

[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

[JulienLecoq]

There are still no way of doing this? I mean to use an id or class instead of important?

[oakland]

Haven't seen any compatible configuration in V4.
Only this: using-the-important-flag
And it seems a little tricky

[JulienLecoq]

arf, okk. Yeah, I don't want to use the important flag. It seems to be very wrong to do so.

[JulienLecoq]

I've managed to made it work using this:

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);

#app {
    @tailwind utilities;
}

But for some reasons that I still don't know why, it breaks the styling of the popover component of SpartanUI (equivalent of Shadcn for Angular).
I need to check why it does this tonight...