layers priority

[mojerf]

we're developing a front end UI framework using tailwind 4 and angular.
currently we're using tailwind ^4.1.14".
we're using the @utility to create new classes for the framework and use it all over the components.
there are some base classes that we decide to use @utility for it and use it for components.
then i need to use @layer components to override the utility classes so if the user wants to override our styles they can do it simply by giving the element tailwind classes which is not possible.

let me give an example to make this clear.

I create a @utility brown and use it for some variants of components.
in a specific component i need to override @apply brown with something else ( which already has @apply brown in it ).
if i use a custom layer or use !important it'll override it BUT the user which is using this specific component can not override it and give another color to it unless they use !important.

i tries this too :

@layer theme, base, utilities, components;

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

which at the end user had to give the classes using important.

what could help me is something like @layer user-classes which are still tailwind classes and comes after @layer components

[rozsazoltan]

I don't understand why you want to swap the components and utilities layers. First of all, in your UI package, the components should be built in such a way that the UI package itself either doesn't use CSS at all or doesn't rely on it heavily - after all, the strength of TailwindCSS lies in inline HTML class definitions.

See:

• Why stop using @apply
• From v4 the reset style cannot be overridden by TailwindCSS classes

Related for @layer:

• What is the order of precedence for CSS?
• In which order do CSS stylesheets override?
• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?
• From v4 the reset style cannot be overridden by TailwindCSS classes

Here are a few examples where using @layers makes it much easier to achieve consistency between two systems working together:

• TailwindCSS v4 utilities are too weak to override the styling of Ant Design v5 components
• chakra-ui overwrites tailwind classes

[mojerf]

either doesn't use CSS at all or doesn't rely on it heavily - after all, the strength of TailwindCSS lies in inline HTML class definitions.

Well actually as i said its an angular project we use ng-content a lot which replace the component that the user use with the ng-content inside the component.
You can't use HTML inline class definition for ng-content so we must use apply.