v4 config conversion for prefix and important, selector strategy

[cdock1029]

In v3 config you could use selector strategy for important:

https://v3.tailwindcss.com/docs/configuration#selector-strategy

module.exports = {
  important: '#app',
}

How do you do this in v4?

Also, v4 docs show how to do prefix options and important in new config:

@import "tailwindcss" important;

@import "tailwindcss" prefix(tw);

But how do you do this if you are customizing the import? Where does it go?

@layer theme, base, components, utilities;

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

[hwkdev]

Hey!

I have a similar question, as I'm trying to disable Preflight and use source(none) which seems only available in @import "tailwindcss".

See Github discussion.

[hwkdev]

Update:

I just got the answer, you have to pass the source(none) to utilities like this:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);

It also works for your case with prefix(tw) and important:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) important;

[wongjn]

For selector-based important, wrap the utilities with the selector:

@layer theme, base, components, utilities;

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

#app {
  @import "tailwindcss/utilities.css" layer(utilities);
  /* OR */
  @layer utilities {
    @tailwind utilities;
  }
}

For prefix(), append it to the theme @import:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities);