Next.jsプロジェクト用Tailwind Config

Next.js用Tailwind Config

Next.jsにはTailwind設定の特定の要件があります。特にNext.js 13で導入されたApp Routerでは重要です。

next/fontとのフォント統合

Next.jsはビルド時にフォントを最適化します。CSS変数アプローチでTailwindと組み合わせます。

App RouterのContentパス

src/ディレクトリパターンを使用するか、ルートにファイルがあるかでパスが異なります。

TypeScript Config

型安全な設定にはtailwind.config.tsを使用し、Config型をインポートします。

next-themesでのダークモード

人気のnext-themesライブラリはdarkMode: "class"と完璧に連携します。テーマの永続化とシステム設定の検出を処理します。