An example-based guide to CSS Cascade Layers

CSS is actually good now! If you’ve been a web developer for a while, you’ll know this hasn’t always been the case. Over the past few years, a lot of really amazing features have been added that now support all the major browsers. Cascading and selector specificity have always been a pain point when writing stylesheets. CSS cascade layers is a new feature that provides us with a lot more power and flexibility for tackling this problem. We no longer need to resort to tricky specificity hacks or order-of-appearance magic.

Cascade layers are really easy to get started with. I think the best way to understand how and when they are useful is by walking through some practical examples.

In this post, we’ll cover:

• What CSS cascade layers are and how they work
• Real-world examples of using layers to manage style priorities
• How Tailwind CSS leverages cascade layers

What are CSS Cascade Layers?

Imagine CSS cascade layers as drawers in a filing cabinet, each holding a set of styles. The drawer at the top represents the highest priority, so when you open the cabinet, you first access the styles in that drawer. If a style isn't found there, you move down to the next drawer until you find what you need.

Traditionally, CSS styles cascade by specificity (i.e., more specific selectors win) and source order (styles declared later in the file override earlier ones). Cascade layers add a new, structured way to manage styles within a single origin—giving you control over which layer takes precedence without worrying about specificity.

This is useful when you need to control the order of styles from different sources, like:

• Resets (e.g., Normalize)
• Third-party libraries (e.g., Tailwind CSS)
• Themes and overrides

You define cascade layers using the @layer rule, assigning styles to a specific layer. The order in which layers are defined determines their priority in the cascade. Styles in later layers override those in earlier layers, regardless of specificity or order within the file.

Here’s a quick example:

@layer base {
  p { color: blue; }
}

@layer theme {
  p { color: darkblue; }
}

In this example, since the theme layer comes after base, it overrides the paragraph text color to dark blue—even though both declarations have the same specificity.

How Do CSS Layers Work?

Cascade layers allow you to assign rules to specific named layers, and then control the order of those layers. This means that:

• Layers declared later take priority over earlier ones.
• You don’t need to increase selector specificity to override styles from another layer—just place it in a higher-priority layer.
• Styles outside of any layer will always take precedence over layered styles unless explicitly ordered.

Let’s break it down with a more detailed example.

audio {
  display: flex;
}

@layer reset {
  audio[controls] {
    display: block;
  }
}

In this example:

• The unlayered audio rule takes precedence because it’s not part of the reset layer, even though the audio[controls] rule has higher specificity.
• Without the cascade layers feature, specificity and order-of-appearance would normally decide the winner, but now, we have clear control by defining styles in or outside of a layer.

Use Case: Overriding Styles with Layers

Cascade layers become especially useful when working with frameworks and third-party libraries. Say you’re using a CSS framework that defines a keyframe animation, but you want to override it in your custom styles. Normally, you might have to rely on specificity or carefully place your custom rules at the end. With layers, this is simplified:

@layer framework, custom;

@layer framework {
  @keyframes slide-left {
    from { margin-left: 0; }
    to { margin-left: -100%; }
  }
}

@layer custom {
  @keyframes slide-left {
    from { translate: 0; }
    to { translate: -100% 0; }
  }
}

There’s some new syntax in this example. Multiple layers can be defined at once. This declares up front the order of the layers. With the first line defined, we could even switch the order of the framework and custom layers to achieve the same result.

Here, the custom layer comes after framework, so the translate animation takes precedence, no matter where these rules appear in the file.

Cascade Layers in Tailwind CSS

Tailwind CSS, a utility-first CSS framework, uses cascade layers starting with version 3. Tailwind organizes its layers in a way that gives you flexibility and control over third-party utilities, customizations, and overrides.

In Tailwind, the framework styles are divided into distinct layers like base, components, and utilities. These layers can be reordered or combined with your custom layers.

Here's an example:

@layer base {
  /* Base styles like resets or typography */
  h1 { font-size: 2rem; }
}

@layer components {
  /* Component-level styles */
  .btn { background-color: blue; }
}

@layer utilities {
  /* Utility classes (e.g., margin, padding) */
  .mt-4 { margin-top: 1rem; }
}

Tailwind assigns these layers in a way that utilities take precedence over components, and components override base styles. You can use Tailwind’s @layer directive to extend or override any of these layers with your custom rules.

For example, if you want to add a custom button style that overrides Tailwind’s built-in btn component, you can do it like this:

@layer components {
  .btn { background-color: green; }
}

Practical Example: Layering Resets and Overrides

Let’s say you’re building a design system with both Tailwind and your own custom styles. You want a reset layer, some basic framework styles, and custom overrides.

@layer reset {
  * { box-sizing: border-box; }
}

@layer framework {
  p { color: gray; }
}

@layer custom {
  p { color: black; }
}

In this setup:

• The reset layer applies basic resets (like box-sizing).
• The framework layer provides default styles for elements like paragraphs.
• Your custom layer overrides the paragraph color to black.

By controlling the layer order, you ensure that your custom styles override both the framework and reset layers, without messing with specificity.

Conclusion

CSS cascade layers are a powerful tool that helps you organize your styles in a way that’s scalable, easy to manage, and doesn’t rely on specificity hacks or the appearance order of rules. When used with frameworks like Tailwind CSS, you can create clean, structured styles that are easy to override and customize, giving you full control of your project’s styling hierarchy. It really shines for managing complex projects and integrating with third-party CSS libraries.

About the author

Dane Grant

Senior Software Engineer

JavaScript developer building things on web, native, and server environments. Free time filled with reading, cooking, dog, sports, comedy, and music.

@danecando@danecando