layer
@layer
Declares one or more cascade layers so authors can control the order in which rule groups cascade, independent of specificity. Layers declared later win over layers declared earlier, and unlayered styles win over all named layers.
@layer <name> { <rules> } | @layer <name>, <name>;Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| @layer a, b, c; | Pre-declare layer order without adding rules yet |
| @layer name { ... } | Add rules into a named layer |
| @layer { ... } | Anonymous layer — order-of-appearance only, no name |
| @import url(...) layer(name); | Import a stylesheet directly into a layer |
| !important | Reverses layer order — earlier layers WIN for !important |
Examples
@layer reset, base, components, utilities;Declare the intended cascade order up front
@layer base {
h1 { font-size: 2rem; }
}
@layer utilities {
.text-xl { font-size: 1.25rem !important; }
}utilities layer wins over base regardless of specificity
@import url('tailwind-base.css') layer(base);Slot a third-party stylesheet into a specific layer
/* Unlayered rules beat every named layer */
.brand { color: rebeccapurple; }Keep escape-hatch overrides unlayered
Gotcha
Layer order is set the FIRST time a layer name appears — reopening it later doesn't move it. For !important declarations the layer priority inverts: earlier layers win.
Related at-rules
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.
@scope
Constrains selectors to a subtree of the DOM defined by a scope root and an optional lower boundary, without adding specificity. It provides native, donut-shaped style scoping similar to what CSS-in-JS libraries emulate.
@supports
Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.