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에 넣으면 유틸리티로 덮어쓸 수 있고, 레이어 밖에 두면 유틸리티보다 강해진다 - 리셋을 가장 앞 레이어에 두는 것도 흔한 구성이다
Tailwind v4와 직접 만든 레이어
@import "tailwindcss";는 맨 앞에 @layer theme, base, components, utilities;를 선언하고 유틸리티를 utilities 레이어에 넣는다(2026 기준). 유틸리티는 레이어 밖(unlayered)이 아니다. 그래서 직접 만든 레이어가 유틸리티보다 약한지 강한지는 그 레이어가 처음 선언된 위치로 정해진다.
- Tailwind import 뒤에서
@layer legacy { … }를 처음 쓰면legacy는utilities뒤에 붙는다. 그러면 유틸리티를 이긴다 - 유틸리티보다 약하게 가두려면 import보다 먼저 전체 순서를 적는다.
@layer선언문(블록이 아닌 것)은@import보다 앞에 올 수 있다 - 같은 이름을 다시 선언해도 순서는 바뀌지 않으므로, Tailwind가 뒤에서 같은 순서를 다시 선언해도 괜찮다
@layer theme, base, legacy, components, utilities; /* 순서를 먼저 정한다 */
@import "tailwindcss";
@layer legacy {
.promo p { font-family: serif; } /* 명시도 (0,1,1) */
}<div class="promo">
<!-- font-sans: Tailwind가 만든 유틸리티 클래스. utilities 레이어에 있고 명시도 (0,1,0) -->
<p class="font-sans">…</p>
</div>.promo p는 명시도가 더 높지만 legacy가 utilities보다 앞 레이어라 진다. 문단은 font-sans 글꼴로 나온다.
명세: CSS Cascade 5 §6.4.3 — Layer Ordering · CSS Cascade 5 §6.4.4.2 — Declaring Without Styles: the @layer statement 출처: MDN — Cascade layers: Cascade layer precedence order · MDN — @layer · Tailwind CSS — Preflight · Tailwind CSS — font-family · Tailwind CSS — Adding custom styles: Simple utilities