토큰 확장
색상, 간격, 폰트, breakpoint를 프로젝트 언어에 맞게 theme extend에 둔다.
임의값 남발은 디자인 일관성을 깨뜨린다클래스 생성 제한
문자열 조합으로 className을 만들 때 Tailwind가 실제 클래스 이름을 볼 수 있는지 확인한다.
bg-${color}는 빌드에서 누락될 수 있다컴포넌트 경계
서버 컴포넌트에서도 정적 className은 안전하지만 브라우저 상태에 따른 클래스는 클라이언트 경계가 필요할 수 있다.
스타일과 상호작용 책임을 나눈다산출 확인
production build에서 CSS 크기와 누락 스타일을 실제 페이지로 확인한다.
dev에서 보이는 스타일이 빌드에서도 남는지 본다content
클래스 탐지 범위
Next의 app 디렉터리와 MDX, 공유 패키지 경로까지 포함한다.
monorepo면 외부 패키지도 본다
theme
디자인 토큰
반복되는 색상과 spacing을 토큰으로 정리해 임의값을
줄인다.
토큰 이름이 UI 언어가 된다
dynamic
동적 클래스 누락
가능한 클래스 목록을 명시하거나 variant 도구로 안전하게
만든다.
safelist는 마지막 선택지다
build
운영 CSS
개발 서버가 아니라 production CSS에서 누락과 크기를
확인한다.
purge 결과가 실제 기준이다