TailwindCSS - Layer

TailwindCSS

 

✅ Layer란?

---

CSS의 layer 개념은 CSS Cascade(스타일이 적용되는 우선순위) 안에서 스타일 시트 간의 우선순위를 명시적으로 제어하기 위해 추가된 새로운 규칙

 

쉽게 말해, CSS에서 여러 스타일이 겹칠 때 누가 이길지 명확하게 순서를 정해주는 방법

 

TailwindCSS에서의 layer

---

Tailwind는 CSS를 크게 세 가지 레이어로 나눠서 관리

 

1. Base
   • 브라우저 기본 스타일 리셋과 타이포그래피 초기화 같은 기본 스타일이 여기에 속함.
   • 예: html, body, a 태그 기본 설정
2. Components
   • 재사용 가능한 컴포넌트 수준의 스타일이 여기에 들어감.
   • 예: 버튼, 카드, 모달 같은 UI 컴포넌트
3. Utilities
   • bg-red-500, p-4, flex 같은 원자 단위 유틸리티 클래스

 

Tailwind는 이 순서대로 CSS를 읽고, 뒤에 있는 레이어가 앞의 레이어를 덮어쓸 수 있음.

 

ex)

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  a {
    @apply text-orange-500;
  }
}

@layer utilities {
  .text-bigger-hello {
    @apply text-3xl font-semibold;
  }
}

@layer components {
  .primary-btn {
    @apply w-full rounded-md bg-orange-500 text-center font-medium text-white transition-colors hover:bg-orange-400;
  }
}

 

TailwindCSS v4는 위의 세 줄이 한 줄로 축약되었다.

@import "tailwindcss";

 

스타일 우선순위 정리

---

스타일 우선순위