Tailwind 스타일은 스캐너가 읽은 클래스만 운영 CSS가 된다

JavaScript 설정 파일보다 소스의 클래스가 자동 탐지되고, 올바른 layer로 생성되어, production 산출물과 화면까지 이어지는지가 핵심이다.

01 · SOURCE

명시적 클래스

JSX·MDX에 완전한 유틸리티 이름을 둔다.

02 · SCAN

자동 source 탐지

프로젝트 파일은 자동으로 읽고 외부 package만 @source로 보완한다.

03 · GENERATE

@theme·variant

CSS-first token과 상태 variant가 규칙을 만든다.

04 · CASCADE

layer 순서

base → components → utilities와 커스텀 CSS를 합친다.

05 · VERIFY

운영 화면

최종 CSS selector와 상태별 UI를 확인한다.

동적 이름은 스캔되지 않는다

위험`bg-${tone}-600`대안toneMap[tone]

외부 package는 탐지 경계 밖일 수 있다

징후외부 UI class만 누락대안@source로 경로 추가

PostCSS 연결과 CSS import는 별개다

징후모든 utility가 없음대안@tailwindcss/postcss와 @import 확인