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);

[thecrypticace]

I updated the preflight docs a while back to clarify how to use important, prefix, source(…), etc… when using individual imports.

Regarding important: "#app" CSS doesn't have a way to import a stylesheet under a selector so this is a bit more complicated. There's been discussion about this for years but no feature for this exists yet. While they're not exactly equivalent cascade layers are the better solution for this generally.

However, should you still need this you should use CSS nesting + @tailwind utilities; to do this nesting yourself, e.g.

@layer theme, base, components, utilities;

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

@layer utilities {
  #app {
    @tailwind utilities;
  }
}

And if you need to provide custom source(…) behavior you can attach it to @tailwind utilities itself:

@layer theme, base, components, utilities;

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

@layer utilities {
  #app {
    @tailwind utilities source(none);
  }
}

Here @tailwind utilities; is the content of the utilities.css file. This is kinda intentionally undocumented (but is tested in core) because it should be rare that people need this feature. If you find yourself using it would definitely be worth taking time to see if you can update things so you don't need it. For example you could customize your @layer order and import stylesheets into earlier layers.

aside: Using @import inside a selector isn't valid CSS and I'm a little surprised that's actually working in Tailwind CSS (it really shouldn't be) and could break other tools arbitrarily.