プロダクション環境の最適化

Tailwind CSSは、非常にパフォーマンスに重点を置いており、プロジェクトで実際に使用しているCSSのみを生成することで、可能な限り最小のCSSファイルを作成することを目指しています。

minifyやネットワーク圧縮と組み合わせることで、通常、大規模なプロジェクトでも10kB未満のCSSファイルになります。たとえば、NetflixはNetflix Top 10にTailwindを使用しており、Webサイト全体でネットワーク経由でわずか6.5kBのCSSしか配信していません。

これほど小さなCSSファイルであれば、ページごとにCSSをコード分割するような複雑なソリューションについて心配する必要はなく、代わりに、一度ダウンロードしてサイトを再デプロイするまでキャッシュされる単一の小さなCSSファイルを配信できます。

可能な限り最小のプロダクションビルドを実現するために、cssnanoのようなツールを使用してCSSをminifyし、Brotliを使用してCSSを圧縮することをお勧めします。

Tailwind CLIを使用している場合は、--minifyフラグを追加することでCSSをminifyできます

npx tailwindcss -o build.css --minify

TailwindをPostCSSプラグインとしてインストールした場合は、プラグインリストの最後にcssnanoを追加してください

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

フレームワークを使用している場合は、多くの場合、本番環境で自動的に処理され、設定する必要さえないため、ドキュメントを確認してください。