프로덕션 최적화

Tailwind CSS는 성능에 중점을 두고 설계되었으며, 프로젝트에서 실제로 사용하는 CSS만 생성하여 가능한 한 작은 CSS 파일을 만드는 것을 목표로 합니다.

압축과 네트워크 압축을 함께 사용하면 대규모 프로젝트에서도 CSS 파일 크기가 10kB 미만으로 유지됩니다. 예를 들어, Netflix는 Netflix Top 10에 Tailwind를 사용하며, 전체 웹사이트의 CSS 크기는 네트워크를 통해 전송될 때 단 6.5kB에 불과합니다.

이렇게 작은 CSS 파일을 사용하면 각 페이지별로 CSS를 코드 분할하는 복잡한 작업을 고민할 필요 없이, 단일 CSS 파일을 제공하여 한 번 다운로드한 후 사이트를 재배포할 때까지 캐싱할 수 있습니다.

가능한 한 작은 프로덕션 빌드를 위해 cssnano와 같은 도구로 CSS를 압축하고, Brotli로 CSS를 압축하는 것을 권장합니다.

Tailwind CLI를 사용하는 경우, --minify 플래그를 추가하여 CSS를 압축할 수 있습니다:

npx tailwindcss -o build.css --minify

Tailwind를 PostCSS 플러그인으로 설치한 경우, 플러그인 목록 끝에 cssnano를 추가하세요:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

프레임워크를 사용하는 경우, 프로덕션 환경에서 자동으로 처리되는 경우가 많으므로 문서를 확인해보세요. 별도의 설정이 필요하지 않을 수도 있습니다.