Tailwind CSS を使って開発をしていると、時には思い通りにスタイルが適用されなかったり、エラーが発生したりすることがあります。この章では、そのような「困った！」場面に遭遇したときの対処法について解説します。

1. よくあるエラーと解決策

ここでは、Tailwind CSS を使っている際によく発生するエラーとその解決策をいくつか紹介します。

(1) スタイルが適用されない

Tailwind CSS のクラスを指定したのに、スタイルが適用されない場合、以下のような原因が考えられます。

• クラス名のタイプミス: クラス名が間違っていると、スタイルは適用されません。特に、大文字と小文字の間違いや、- と _ の間違いなどに注意してください。
• CSS ファイルが正しく読み込まれていない: index.html で CSS ファイルが正しく読み込まれているか確認してください。link タグの href 属性が正しいパスを指している必要があります。
• PurgeCSS で必要なクラスが削除されている: 本番環境で PurgeCSS を使っている場合、必要なクラスが誤って削除されている可能性があります。purge オプションの設定を見直し、必要なクラスが保持されるようにしてください。
• キャッシュの問題: ブラウザのキャッシュが原因で、古い CSS が読み込まれている可能性があります。ブラウザの開発者ツールでキャッシュを無効にするか、ハードリロード（Windows: Ctrl + Shift + R, Mac: Cmd + Shift + R）を試してみてください。
• 詳細度の問題: 他の CSS ルールによってスタイルが上書きされている可能性があります。ブラウザの開発者ツールで、どの CSS ルールが適用されているかを確認し、必要に応じて ! を付けて 強制的にスタイルを適用したり、より詳細度の高いセレクタを使用したりすることを検討してください。

(2) ビルドエラーが発生する

npm run build を実行した際に、エラーが発生する場合があります。よくあるエラーメッセージとその解決策は以下の通りです。

• Module not found: 必要なモジュールがインストールされていない場合に発生します。エラーメッセージに表示されているモジュールを npm install でインストールしてください。
• Cannot find module 'tailwindcss': Tailwind CSS がインストールされていないか、パスが間違っている場合に発生します。npm install -D tailwindcss を実行して Tailwind CSS をインストールし、tailwind.config.js や postcss.config.js の設定が正しいことを確認してください。
• PostCSS plugin tailwindcss requires PostCSS 8: Tailwind CSS と PostCSS のバージョンが互換性がない場合に発生します。Tailwind CSS v3 以降は PostCSS 8 が必要です。npm install -D tailwindcss@latest postcss@latest autoprefixer@latest を実行して、関連パッケージを最新バージョンにアップデートしてください。

(3) JIT モードでスタイルが正しく生成されない

JIT モードを使っている場合、以下のような原因でスタイルが正しく生成されないことがあります。

• content の設定が間違っている: tailwind.config.js の content オプションで、Tailwind CSS を適用するファイルが正しく指定されているか確認してください。
• 動的に生成されたクラス名が検出されない: JavaScript などで動的にクラス名を生成している場合、JIT モードがそれらのクラス名を検出できないことがあります。その場合は、safelist オプションを使って、生成される可能性のあるクラス名を明示的に指定する必要があります。

2. デバッグに役立つツール

Tailwind CSS の問題をデバッグする際には、以下のようなツールが役立ちます。

• ブラウザの開発者ツール: 主要なブラウザには、開発者ツールが搭載されています。開発者ツールを使うと、HTML の構造や CSS の適用状況を確認したり、JavaScript のエラーをデバッグしたりすることができます。
• Tailwind CSS IntelliSense: 前述の VS Code 拡張機能です。クラス名のオートコンプリートやホバープレビュー、構文チェックなどの機能により、問題を早期に発見するのに役立ちます。
• Tailwind Play: Tailwind CSS の公式プレイグラウンドです。ブラウザ上で Tailwind CSS を試すことができ、簡単なテストやデバッグに便利です。(https://play.tailwindcss.com/)

3. さらに調査をしたいときは

上記の方法で問題が解決しない場合は、以下のリソースを参考に、さらに調査を進めてみましょう。

• Tailwind CSS 公式ドキュメント: Tailwind CSS に関する最も信頼できる情報源です。基本的な使い方から応用的な使い方まで、幅広い情報が網羅されています。(https://tailwindcss.com/docs/installation)
• Tailwind CSS GitHub リポジトリ: Tailwind CSS のソースコードや Issue、Pull Request などが公開されています。(https://github.com/tailwindlabs/tailwindcss)
• Tailwind CSS コミュニティ: Tailwind CSS に関する質問や議論ができるコミュニティがいくつかあります。
  • Tailwind CSS Discord サーバー: Tailwind CSS の公式 Discord サーバーです。(https://tailwindcss.com/discord)
  • Stack Overflow: tailwindcss タグで検索すると、多くの質問と回答が見つかります。(https://stackoverflow.com/questions/tagged/tailwindcss)
• Google 検索: エラーメッセージや問題の症状を Google で検索すると、解決策が見つかることがあります。