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.
Previous
What are CSS container queries and how do they differ from media queries?
Next
What is the Shadow DOM and what problem does it solve?
More HTML / CSS Questions
View all →- Advanced What are CSS container queries and how do they differ from media queries?
- Advanced What is the Shadow DOM and what problem does it solve?
- Advanced What are CSS Houdini APIs?
- Advanced What is the difference between browser reflow and repaint?
- Advanced What are CSS :is(), :where(), and :has() selectors?