Bass Layer
정의
- 기본 HTML 태그(예: h1, p, a, button)에 대해 reset 또는 기본 스타일을 설정할 때 사용
특징
- 보통 Tailwind의 Preflight (Normalize 기반 reset)가 여기에 포함됨
- 전역적인 영향을 줌
@layer base {
h1 {
@apply text-2xl font-bold;
}
body {
@apply bg-white text-gray-800;
}
}
언제 쓰지?
- HTML 태그의 기본 스타일 커스터마이징이 필요할 때
- 브라우저 기본 스타일을 통일시키고 싶을 때
Components Layer
정의
- 재사용 가능한 컴포넌트 스타일(버튼, 카드 등)을 정의할 때 사용.
특징
- 재사용성을 고려한 추상화된 스타일
- 클래스 이름으로 정의 (.btn, .card, .alert 등)
- @apply를 통해 여러 유틸리티를 묶어서 사용 가능
@layer components {
.btn {
@apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}
.card {
@apply p-4 border rounded shadow;
}
}
언제 쓰지?
- 자주 반복되는 스타일을 하나의 클래스로 묶고 재사용하고 싶을 때
- 디자인 시스템에서 공통 컴포넌트를 정의할 때
Utilities Layer
정의
- Tailwind의 핵심이자 가장 많이 쓰이는 부분.
- 작고 단일 책임을 가진 클래스(예: text-center, bg-red-500, mt-4)들을 포함.
특징
- 조합해서 원하는 디자인 구현
- 커스텀 유틸리티도 추가 가능
@layer utilities {
.rotate-y-180 {
transform: rotateY(180deg);
}
.text-shadow {
text-shadow: 1px 1px 2px gray;
}
}
언제 쓰지?
- 기존에 없는 유틸리티 클래스를 직접 만들고 싶을 때
- 자주 쓰는 속성 조합을 간편하게 하고 싶을 때
정리
| 목적 | 레이어 |
|---|
| HTML 태그의 기본 스타일 설정 | base |
| 버튼, 카드 등 컴포넌트화된 스타일 | components |
| 작은 유틸리티 클래스 정의/확장 | utilities |
