Tailwind v4, preflight and prefix

[federicocappellotto97]

I need to add prefix to my class and disable preflight to add tw in an existing project

If i do like this
@import 'tailwindcss' prefix(tw);
i can use the prefix correctly, but i need to disable preflight as well

But doing like this doesn't work, and i can't find any docs about it

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

[wongjn]

Prefix doesn't make sense with preflight since there are no classes to prefix. Of you want to limit its effect to a subset of the DOM, you could try rewriting it with your own scoping rule(s) or try @importing it nested in some rule (no idea if that works).

[federicocappellotto97]

Mm wait, i didn't mean that, my goal is to completely disable preflight, and then have a prefix for all the utilities, to avoid conflicts with the existing project.
Doing this @import 'tailwindcss' prefix(tw); i can already use utilities with the prefix, like tw:bg-red-400, but preflight is still active

[wongjn]

Try adding the prefix(tw) to the utilities @import instead?

[federicocappellotto97]

If i do as the docs say i get an error, https://tailwindcss.com/docs/preflight#disabling-preflight

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

[vite] Internal server error: Can't resolve './theme.css' in '/Users/federico.cappellotto/Dev/AQuest/AQuest/aiq2/src'
  Plugin: @tailwindcss/vite:generate:serve

And if i import the css from tailwindcss like this i get another error

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

AM [vite] Internal server error: Cannot apply unknown utility class: tw:cursor-pointer

[wongjn]

So the second block is more correct, perhaps you need to add the prefix() to both @imports? (Sorry, I'm not at a computer to test these suggestions myself!)

[federicocappellotto97]

Oh god, i already tried that, but it wasn't working due to this comment ahah //@import 'tailwindcss' prefix(tw);

Removing the comment, I can confirm now it's working, thanks mate :)

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

[fxmkdev]

Thanks, that’s great! I was struggling with the same.

Would be great to have this explained the docs. I couldn’t find at least where this prefix() syntax can be used and how it works together with layer().

[alpipego]

I had the same issue today, but I can't get it to work. Has this changed in the meantime?

This input

@layer utilities;

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

@source inline("tw:flex tw:grid");

gives me this output

/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
@layer utilities;
@layer utilities;

I have tried without inlining the classes, but that didn't change anything. Moreover, if I remove the source(none) it picks up the keyword static from *.php and adds it as a class in the output. So it looks like the prefix is not applied here.

[Velkamhell97]

You have to use the prefix in this way

<div class="tw:flex"></div>

[RichardDavidKaavalan]

can anyone know how to add "tw-" not "tw:" ? I got used to the Hyphen "-".

[wongjn]

I don't believe this is possible.