CSS 규칙을 이름 붙인 묶음(레이어)으로 나누고, 묶음 사이의 우선순위를 명시적으로 정하는 기능. CSS Cascade Level 5 명세에서 캐스케이드에 새 단계로 들어왔고, 명시도보다 먼저 평가된다.
@layer base, components, utilities; /* 뒤에 선언할수록 강함 */
@layer base {
#app .box { color: red; } /* 명시도가 훨씬 높아도 */
}
@layer utilities {
.box { color: blue; } /* 레이어가 뒤라서 이김 */
}핵심 규칙
- 레이어 순서는 처음 선언된 순서로 정해진다. 맨 위에
@layer a, b, c;처럼 순서만 먼저 적어 두는 것이 관례다 - 레이어에 속하지 않은 규칙(unlayered)은 모든 레이어보다 강하다. "레이어에 넣을수록 약해진다"고 기억하면 된다
!important가 붙으면 순서가 뒤집힌다. 먼저 선언된 레이어가 이기고, 레이어 안의!important가 레이어 밖의!important보다 강하다
| 비교 | 일반 선언 | !important |
|---|---|---|
| 레이어 vs 레이어 밖 | 레이어 밖 승 | 레이어 승 |
| 앞 레이어 vs 뒤 레이어 | 뒤 레이어 승 | 앞 레이어 승 |
쓰는 곳
- 오래된 전역 리셋이나 서드파티 CSS처럼 명시도가 높은 규칙을 약한 레이어에 가두면, 유틸리티 클래스(Utility Class)가 명시도 싸움 없이 이긴다. 이때 가둔 규칙에
!important가 남아 있으면 위 표대로 오히려 이겨 버리니 함께 정리해야 한다 - Tailwind v4는 출력 CSS를
theme,base,components,utilities레이어로 나눈다(2026 기준). 직접 만든 컴포넌트 클래스를@layer components에 넣으면 유틸리티로 덮어쓸 수 있고, 레이어 밖에 두면 유틸리티보다 강해진다 - 리셋을 가장 앞 레이어에 두는 것도 흔한 구성이다