v4 - important selector

[afzalsayed96]

Trying to figure out a way to use the important selector from the tailwind config in the css and the following seems to work on play with v4.

@import "tailwindcss/preflight" layer(base);

.custom-selector {
  @import "tailwindcss";
  
}

Wanted to confirm if this is going to be the correct and official way to achieve the desired behaviour.

[adamwathan]

Hey! Not sure how we're going to handle this yet, if that works it's mostly by coincidence at the moment.

[oschebesta]

Hi, is it planned to implement this feature into the new version? What would be the v4 way to achieve the same behaviour?

[wongjn]

The style of the code in the OP works in v4. Though more concretely, you'd want something more like:

@layer theme, base, components, utilities;

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

.custom-selector {
  @import "tailwindcss/utiltiies" layer(utilities);
}

[oschebesta]

thanks, that is awesome. 🙌