Tailwind CSS は理論上、使用するクラスのみを送信します。しかし実際には、設定ミスのプロジェクトは必要以上に多くの CSS を送信し、任意値や @apply といった一般的なパターンが暗黙的にスタイルシートを肥大化させることがあります。Tailwind バンドルを 10 KB 以下に保つ方法を解説します。

Tailwind の JIT の仕組み

Tailwind v3+ は Just-In-Time コンパイラーを使用してソースファイルのクラス名をスキャンし、それらのクラスが必要とする CSS のみを生成します。出力は純粋で最小限のスタイルシートです。

CSS バンドルサイズの監査

本番ビルド後に .next/static/css/ の CSS 出力を確認します。適切に設定された Tailwind アプリ: 中程度の複雑さで gzip 10 KB 以下、100 KB 以上は設定エラーの赤信号です。

Content glob の設定ミス

Tailwind バンドルが過大化する最も一般的な原因は、広すぎる content glob です。node_modules を誤ってスキャンすると、それらのファイルが参照するすべてのクラスが生成されます — 本番環境に送信されないファイルであっても。

任意値：必要だがコストがかかる

Tailwind の任意値構文（w-[337px] など）は値ごとに固有の CSS ルールを生成します。数百個の任意値があるプロジェクトは、tailwind.config.js のカスタムトークンに統合すべきです。

@apply の乱用

@apply はグローバル CSS のコンポーネントクラスに有用です。JIT が既に処理するコンポーネントファイル内で使用すると問題になります。コンポーネントファイルは既に Tailwind クラスに直接アクセスできます。

プラグインの影響

@tailwindcss/typography: +8〜15 KB
@tailwindcss/forms: +2〜4 KB
サードパーティプラグイン: 個別に測定、50 KB+ 追加するものも