Tailwind CSS는 이론적으로 사용하는 클래스만 전송합니다. 하지만 실제로는 잘못 구성된 프로젝트가 필요 이상으로 많은 CSS를 전송하고, 임의 값과 @apply 같은 일반적인 패턴이 자동으로 스타일시트를 비대하게 만들 수 있습니다. Tailwind 번들을 10KB 이하로 유지하는 방법을 알아봅니다.

Tailwind의 JIT 작동 방식

Tailwind v3+는 Just-In-Time 컴파일러를 사용하여 소스 파일에서 클래스 이름을 스캔하고 해당 클래스에 필요한 CSS만 생성합니다. 출력은 순수하고 최소한의 스타일시트입니다 — 사용하지 않는 클래스나 설정 이상의 리셋 부풀림이 없습니다.

CSS 번들 크기 감사

프로덕션 빌드 후 .next/static/css/의 CSS 출력을 확인하세요. 잘 구성된 Tailwind 앱의 기준: 중간 복잡도는 gzip 10KB 이하, 디자인 시스템 중심은 20~40KB, 100KB 이상은 구성 오류의 적신호입니다.

Content glob 잘못 설정

Tailwind 번들이 과대화되는 가장 흔한 원인은 너무 넓은 content glob입니다. 잘못된 예:"./**/*.{js,ts,jsx,tsx}" — node_modules까지 스캔합니다. 올바른 예:"./src/**/*.{js,ts,jsx,tsx}" — 소스만 스캔합니다.

glob이 실수로 테스트 픽스처나 node_modules를 스캔하면, 해당 파일이 참조하는 모든 클래스가 생성됩니다 — 프로덕션에 전송되지 않는 파일일지라도.

임의 값: 필요하지만 비용이 드는

Tailwind의 임의 값 문법(w-[337px], bg-[#1a2b3c])은 각 값에 대한 고유한 CSS 규칙을 생성합니다. 각각 스타일시트에 ~40바이트를 추가합니다. 50개의 임의 값은 ~2KB를 추가합니다. 이는 괜찮습니다. 하지만 디자인 시스템 일회성에서 수백 개의 임의 값이 있는 프로젝트는 tailwind.config.js의 커스텀 토큰으로 통합해야 합니다.

@apply 남용

@apply는 빌드 타임에 Tailwind 유틸리티를 일반 CSS로 확장합니다. 글로벌 CSS의 컴포넌트 클래스에 유용합니다. 하지만 JIT가 이미 처리하는 컴포넌트 파일 내에서 사용되면 문제가 됩니다. 컴포넌트 파일은 이미 Tailwind 클래스에 직접 접근할 수 있습니다.

Safelist 신중하게 사용

safelist 옵션은 content 파일에 나타나지 않더라도 특정 클래스가 생성되도록 강제합니다. 동적으로 구성된 클래스 이름에 필요합니다. 하지만 regex 패턴 사용은 피하세요 — 일치하는 클래스의 모든 변형을 생성하여 번들에 20~100KB를 추가할 수 있습니다.

플러그인 영향

@tailwindcss/typography: +8~15KB (블로그 콘텐츠에 가치 있음)
@tailwindcss/forms: +2~4KB
서드파티 플러그인: 개별 측정 필요, 일부 50KB+ 추가