What is the CSS @layer at-rule?

Answer

CSS @layer (Cascade Layers) allows you to explicitly define the order of specificity precedence between groups of styles. Declare layers: @layer base, components, utilities;. Styles in later-declared layers always win over earlier layers, regardless of specificity. This solves the common problem of utility classes (like Tailwind) needing !important to override component styles. Example: a .text-red utility class with specificity (0,1,0) in the utilities layer will always beat a .card .title rule with specificity (0,2,0) in the components layer, because the utilities layer is declared last. @layer gives CSS authors explicit, deterministic control over the cascade beyond specificity.