Cascade Layers
@layer lets you define explicit cascade layers. Later layers win over earlier ones regardless of specificity, giving you fine-grained control.
CSS
Advanced
5 min read
Cascade Layers (@layer)
Example
@layer base, components, utilities;
@layer base { a { color: blue; } }
@layer components { .btn { color: white; background: navy; } }
@layer utilities { .text-red { color: red !important; } }
/* utilities layer wins over components, even with lower specificity */ Pro Tip
Declare layer order at the top of your stylesheet to control priority globally.