目次
Next.jsとTailwind CSSで開発していて、開発環境では完璧に表示されるのに本番ビルドすると一部のスタイルが消えてしまう問題に遭遇しました。同じ問題で悩んでいる方向けに、原因と解決方法をまとめます。
発生した問題
開発環境（npm run dev）では正常に表示されていたのに、本番ビルド（npm run build && npm start）すると以下の問題が発生：
- H2タグの太字（font-bold）が効かない
- 記事上部のパディングが消える
- SVGアイコンが表示されない（幅・高さが0になる）
原因
Tailwind CSS v3では、ビルド時に使用されていないクラスを削除する仕組み（PurgeCSS）が動作します。これにより、以下のようなケースでクラスが削除されてしまいます：
- 動的に生成されるクラス名
- CSS Modulesで使用している@applyディレクティブ内のクラス
- content配列に含まれていないファイル内のクラス
解決方法
1. tailwind.config.jsのcontent配列を拡張
// tailwind.config.js
module.exports = {
// 修正前
content: ['./components/**/*.tsx', './pages/**/*.tsx'],
// 修正後
content: [
'./components/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./lib/**/*.{js,ts,jsx,tsx}',
'./components/**/*.module.css', // CSS Modulesも含める
],
// ...
}
これにより、より多くのファイルがスキャン対象になり、使用されているクラスが正しく検出されます。
2. safelistで重要なクラスを保護
// tailwind.config.js
module.exports = {
content: [
// ...
],
safelist: [
'font-bold',
'font-semibold',
'pt-1',
'pt-2',
'pt-4',
'pt-8',
'pt-10',
'znc', // カスタムクラス
/^markdown/, // markdownで始まるクラス全て
],
// ...
}
safelistに登録されたクラスは、ビルド時に削除されません。
3. CSS Modulesで!importantを使用
Tailwindの@applyディレクティブが期待通りに動作しない場合：
/* components/markdown-styles.module.css */
.markdown h2 {
@apply text-xl mt-8 py-1 border-b leading-snug border-gray-700 md:text-2xl;
font-weight: 700 !important; /* 確実に適用される */
}
デバッグのコツ
1. ビルド出力を確認
npm run build
ビルド時に警告が表示されることがあります：
warn - Regular expressions in `safelist` work differently in Tailwind CSS v3.0.
2. 生成されたCSSを確認
ビルド後の.next/static/cssディレクトリ内のCSSファイルを確認して、必要なクラスが含まれているか確認します。
3. 開発環境と本番環境の比較
ブラウザの開発者ツールで、同じ要素に適用されているクラスを比較します。
よくあるパターンと対策
SVGアイコンが消える
// 問題のあるコード
<img src="/icon.svg" className="w-4 h-4" />
対策：content配列にコンポーネントファイルを確実に含める。
動的クラス名
// 問題のあるコード
const sizeClass = `w-${size} h-${size}`;
対策：完全なクラス名を使用するか、safelistに追加。
// 修正後
const sizeClass = size === 4 ? 'w-4 h-4' : 'w-6 h-6';
Next.js特有の注意点
Next.jsでoutput: 'export'を使用している場合は、静的エクスポートのため、さらに注意が必要です：
// next.config.js
module.exports = {
output: 'export', // 静的サイト生成
};
この設定では、全てのページが事前にビルドされるため、動的なスタイルの扱いに特に注意が必要です。
まとめ
Tailwind CSSの本番ビルド問題は、主にPurgeCSSによるクラスの削除が原因です。解決策は：
- content配列を適切に設定して、全ての必要なファイルをスキャン対象にする
- safelistを使用して、重要なクラスを保護する
- CSS Modulesでは!importantを使って確実にスタイルを適用する
これらの対策により、開発環境と本番環境で一貫した表示を実現できます。特にブログやドキュメントサイトのように、マークダウンコンテンツを扱う場合は、この設定が重要になります。
