CSS Cascade Layers
Control CSS specificity using cascade layers to organize stylesheets and prevent specificity wars in large projects.
Code
@layer base, components, utilities;
@layer base {
h1 { font-size: 2rem; }
}
@layer components {
.btn { padding: 0.5rem 1rem; }
}
@layer utilities {
.mt-4 { margin-top: 1rem; }
}Report a problem with this exampleOpens a pre-filled issue on GitHub.