Tailwind CSS @layer 사용법: Base, Components, Utilities

Tailwind CSS에서 @layer 사용의 정확한 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Tailwind CSS를 사용하는 웹 개발자, 특히 컴포넌트 및 유틸리티 스타일링에 대한 이해가 필요한 중급 이상 개발자

핵심 요약

  • @layer base: 글로벌 리셋 및 기본 요소 스타일링에 사용 (body, h1, 글꼴 설정 등)
  • @layer components: 반복 가능한 컴포넌트 스타일 정의 (.btn, .card 등)
  • @layer utilities: 커스텀 유틸리티 스타일 정의 (.text-shadow, .scrollbar-none 등)
  • 우선순위: basecomponentsutilities (유틸리티가 가장 높은 우선순위)

섹션별 세부 요약

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-shadowscrollbar-width 설정

결론

  • @layer base는 글로벌 스타일, @layer components는 컴포넌트, @layer utilities는 커스텀 유틸리티로 구분하여 사용해야 하며, 유틸리티가 가장 높은 우선순위를 가지는 점을 주의 깊게 적용하세요. 예: .text-shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }