Tailwind 빌드 점검

Tailwind 클래스 빌드 확인

tailwind.config를 만들었다고 스타일이 보장되는 것은 아니다. content scan 범위, layer 순서, plugin 출력, 동적 className, production purge 결과를 직접 확인해야 개발 서버에서는 보였던 스타일이 배포에서 사라지는 일을 막을 수 있다.

01

content 경로 확인

app, pages, components, content, MDX, monorepo package 경로가 스캔에 들어가는지 본다.

스캔 밖 파일의 클래스는 운영 CSS에 남지 않는다
02

layer 순서 확인

base, components, utilities의 삽입 순서와 커스텀 CSS 충돌을 점검한다.

나중 규칙이 이전 규칙을 덮는다
03

동적 클래스 제한

문자열 조합으로 만든 클래스가 빌드 도구에 보이는지 확인한다.

허용 목록보다 명시적 매핑이 안전하다
04

plugin 출력 확인

typography, forms, custom plugin이 기대한 selector를 만드는지 산출 CSS에서 본다.

설치와 적용은 별도다
05

production 비교

개발 서버와 production build 화면을 비교해 누락 스타일과 CSS 크기를 확인한다.

최종 기준은 빌드 산출물이다
content
스캔 범위 클래스가 쓰인 모든 파일 경로를 포함해야 한다.
MDX와 외부 패키지를 놓치기 쉽다
theme
토큰 확장 반복 색상과 간격은 theme extend로 정리한다.
임의값 남발을 줄인다
plugin
생성 규칙 플러그인이 추가한 class와 selector가 실제 CSS에 있는지 본다.
버전 호환을 확인한다
purge
운영 CSS 최소화 사용하지 않는 class는 빠지고 필요한 class는 남아야 한다.
동적 이름이 가장 위험하다

빌드 확인

CSS 검색 production CSS에서 핵심 class selector가 남아 있는지 확인한다.
동적 variant 상태별 색상과 크기 클래스가 빌드 후 누락되지 않는지 본다.
경로 추가 새 폴더에 컴포넌트를 만들었을 때 content 설정도 갱신되는지 확인한다.