Tailwind CSS에서 @layer 사용의 정확한 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Tailwind CSS를 사용하는 웹 개발자, 특히 컴포넌트 및 유틸리티 스타일링에 대한 이해가 필요한 중급 이상 개발자
핵심 요약
- @layer base: 글로벌 리셋 및 기본 요소 스타일링에 사용 (
body
,h1
, 글꼴 설정 등) - @layer components: 반복 가능한 컴포넌트 스타일 정의 (
.btn
,.card
등) - @layer utilities: 커스텀 유틸리티 스타일 정의 (
.text-shadow
,.scrollbar-none
등) - 우선순위:
base
→components
→utilities
(유틸리티가 가장 높은 우선순위)
섹션별 세부 요약
1. @layer base: 전역 스타일 초기화
- 글로벌 리셋 및 기본 요소 스타일 적용 (예:
body
,h1
,button
) - 글로벌 폰트 설정 (
font-sans
,text-foreground
) - 기본 요소 스타일 정의 (
@apply text-3xl font-bold text-gray-900
)
2. @layer components: 재사용 가능한 컴포넌트 스타일링
- 반복 가능한 UI 요소 정의 (예:
.btn
,.card
,.input
) - 유틸리티 클래스 조합을 통해 컴포넌트 스타일링 (예:
.btn { @apply px-4 py-2 bg-purple-600 }
) base
이후,utilities
이전에 로드
3. @layer utilities: 커스텀 유틸리티 스타일링
- 특정 유틸리티 정의 (예:
.text-shadow
,.scrollbar-none
) - 기본 유틸리티보다 우선순위가 높아 오버라이드 가능
@layer utilities
에서text-shadow
및scrollbar-width
설정
결론
@layer base
는 글로벌 스타일,@layer components
는 컴포넌트,@layer utilities
는 커스텀 유틸리티로 구분하여 사용해야 하며, 유틸리티가 가장 높은 우선순위를 가지는 점을 주의 깊게 적용하세요. 예:.text-shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }