Using TW4 with UI library that is using at-layer

[tounsoo]

I'm playing with couple UI libraries with TW4 and some of them are using CSS at-layer already. How do I go about to make sure that TW4 layer and UI libraries layer work well.

FYI: What I would want is to make sure that UI libraries are overridden by TW4 class that I use.

[wongjn]

Have a @layer statement that comes before any CSS like:

@layer theme, base, components, ui-library, utilities;

theme, base, components and utilities are Tailwind @layers, while ui-library would be the UI library's @layer.

[tounsoo]

I see. What if they are already using components?

[wongjn]

Should be fine - Tailwind outputs its utility class names in utility.

[tounsoo]

Ah I guess I can also redefine the layer with import.

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

then do

// core and components is layer used in UI-library
@layer theme, base, twcomponents, core, components, utilities;