Organizing Custom CSS With Layers
Use @layer base, @layer components, and @layer utilities to control specificity and ensure custom styles integrate correctly with Tailwind's output.
The CSS Cascade Challenge
When mixing Tailwind utility classes with custom CSS, specificity conflicts can emerge. A custom CSS rule like .btn { color: red; } might override a Tailwind utility text-blue-500 due to source order, even though you intended the utility to win. Tailwind's @layer directive solves this by giving you explicit control over where in the CSS cascade your custom styles are inserted.
Tailwind's Three Layers
Tailwind organizes all generated CSS into three ordered layers: base comes first and contains element-level resets and defaults. components comes second and is designed for multi-utility class abstractions. utilities comes last and contains all single-purpose utility classes. This order ensures utilities always win over component styles, which always win over base styles — a predictable and intentional hierarchy.
/* Order in final CSS output: */
/* 1. @layer base (element defaults) */
/* 2. @layer components (component classes) */
/* 3. @layer utilities (utility classes) */
/* Your main CSS entry file */
@tailwind base; /* injects base layer */
@tailwind components; /* injects components layer */
@tailwind utilities; /* injects utilities layer */All lessons in this course
- What @apply Does and When to Use It
- Creating Reusable Component Classes
- Organizing Custom CSS With Layers
- @apply Pitfalls and Alternatives