Tailwind ConfigでContentパス設定
tailwind.config.jsのcontent配列を設定し、Tailwindがすべてのテンプレートファイルをスキャンし、未使用のCSSをツリーシェイクして最適なバンドルサイズを実現します。
General
詳細な説明
Contentパス設定
content配列はTailwindにクラス名をスキャンするファイルを指示します。これはプロダクションビルドにとって重要です。
フレームワーク別の一般的なパターン
Next.js、Vite + React、Laravel + Bladeなど、フレームワークごとに適切なパスが異なります。
外部パッケージの含有
Tailwindクラスを内部で使用するパッケージがある場合、そのパスもcontentに含める必要があります。
Safelist: 特定のクラスを保持
Tailwindのスキャナーが検出できない動的に生成されるクラス名には、safelistを使用します。
ユースケース
新しいプロジェクトのセットアップ時や、Tailwindのcontentスキャナーがテンプレートファイルを見つけられずプロダクションスタイルが欠落している場合にこのガイドを参照してください。