CSS cascade layer를 사용하면 Tailwind 유틸리티와 직접 만든 스타일의 우선순위를 선택자 싸움 없이 정할 수 있어.
@layer는 cascade에 이름 있는 순서를 만들어
선택자의 구체성이 비슷할 때 어느 규칙이 이길지 파일 위치에만 맡기면 유지보수가 어려워. Layer를 사용하면 base, components, utilities처럼 규칙의 역할과 순서를 명시할 수 있어.
Tailwind의 계층에 맞춰 넣어
기본 엘리먼트 스타일은 base, 재사용하는 컴포넌트 클래스는 components, 작은 단일 목적 규칙은 utilities에 둬. 뒤쪽 utilities가 필요한 속성만 덮어쓸 수 있으므로 긴 선택자나 !important를 늘리지 않아도 돼.
컴포넌트 클래스는 묶음에 이름을 붙여
버튼의 여러 유틸리티가 자주 반복된다면 components layer에 .btn 같은 클래스를 둘 수 있어. 다만 한 번 쓰는 스타일까지 모두 추상화하지 말고, 여러 화면에서 같은 의미로 반복되는 묶음만 올려.
Layer 순서는 선택자 구체성보다 먼저 적용돼
서로 다른 layer에 있는 두 규칙이 같은 속성을 정하면 뒤에 선언된 layer가 이겨. Components layer의 긴 선택자보다 utilities layer의 짧은 클래스가 우선할 수 있는 이유야. 같은 layer 안에서는 평소처럼 구체성과 소스 순서가 적용돼.
Tailwind의 기본 계층
Preflight와 기본 엘리먼트 규칙은 base에, 재사용할 카드와 버튼은 components에, 작은 단일 목적 클래스는 utilities에 둬. 호출자가 px-8을 추가해 컴포넌트의 기본 padding을 바꿀 수 있어야 한다면 기본 스타일을 components에 두는 편이 맞아.
외부 CSS도 layer로 위치를 정할 수 있어
서드파티 stylesheet를 낮은 layer에 import하면 직접 만든 components와 utilities가 예측 가능하게 덮어쓸 수 있어. 무작정 !important를 붙이기 전에 외부 규칙이 어느 layer에 있는지 확인해.
@layer components 안의 .btn에는 여러 화면에서 반복되는 기본 스타일만 두고, 한 화면의 특별한 배치는 JSX의 유틸리티로 남겨. 그래야 추상화가 의미를 보존해.