CSS cascade layers (@layer) for predictable specificity

Specificity wars happen when global styles, component CSS, and utility frameworks compete. @layer assigns explicit priority bands in the cascade: lower layers lose to higher layers regardless of selector complexity (with nuanced !important rules).

Declaring order once#

@layer reset, theme, components, utilities;

Then wrap imports:

@layer theme {
  :root {
    --color-bg: #0a0a0a;
  }
}
@layer components {
  .card {
    background: var(--color-bg);
  }
}

Third-party CSS#

Import vendor CSS into a low layer so your design system can override without !important soup:

@layer reset, vendor, theme, components;
@import 'legacy-vendor.css' layer(vendor);

Tailwind v4#

Tailwind can emit utilities inside a named layer so your custom CSS chooses whether to sit above or below utilities.

Summary#

Layers document intent: what is foundational vs branded vs atomic utilities. They scale better than escalating selector specificity in large codebases.