[v4] How to disable "preflight" while using "prefix"?

[chenkuangkuang]

I use vite to configure tailwind. According to the documentation, I have made the following settings:

@import "tailwindcss" prefix(tw);

Then I want to disable "preflight", but the documentation tells me to do this:

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

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

How are the above two configurations compatible?

[adamwathan]

Hey! This should do what you want:

https://play.tailwindcss.com/RBgk7fFeQa?file=css

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

[wongjn]

It doesn't really make sense to have different prefixes. As evidenced in this Tailwind Play, Tailwind will use the prefix that is set on the tailwindcss/theme.css import.

[universse]

just wanna confirm that it's expected behavior. cuz Adam's answer gives the perception that having different prefixes could work, cuz the below is still valid CSS

.twu:mt-4 {
  margin-top: var(--twt-...);
}

[wongjn]

At least, prefix() doesn't seem to affect anything on the tailwindcss/utilities.css import: https://play.tailwindcss.com/calns34f5X?file=css. Furthermore in tests such as here and here, the prefix() function is only ever attached to @theme or the @import "tailwindcss";, thus affirming its relation to the @theme block, which is implicitly what @import "tailwindcss/theme.css" contains.

[adamwathan]

I think we're going to make separate prefixes work at some point but yeah right now it's the theme one that drives everything.

[universse]

thanks for looking into it