Custom layers

[o-t-w]

I always write some of my own CSS rather than sticking purely to utility classes. If I’m defining my own layers, how do I control the order of layers? The approach I’m taking at the moment is leading to duplication. It has output this:

@layer theme, base, my-custom-layer, components, utilities;
@layer theme, base, components, utilities;

I’d like some Tailwind layers (the utilities layer for example) to be given a higher priority than my custom one, and others, like theme and base, to get a lower priority than my custom layer

[wongjn]

Breakout the @import "tailwindcss"; statement into its constiuent parts. This allows you to add your custom layer:

@layer theme, base, my-custom-layer, components, utilities;

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

[rozsazoltan]

Related:

• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?
• https://discord.com/channels/486935104384532500/1398246162787729504/1398248528316469288

Actually, in the earlier sections I said the same thing Wongjn mentioned here earlier. Just follow that.

That said, it's still worth considering whether you really need a custom layer at all.

Alternative without custom layer
By the way, you can place your styles in the base layer too, right? Among all the base-level styles, the one added last will take precedence - so your custom code will always override preflight.css, assuming you load Preflight earlier.

@layer theme, base, components, utilities;

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

@import "./mybase.css" layer(base);

or

@import "tailwindcss";

@import "./mybase.css" layer(base);