悩む人あれ、急にTailwindCSSが効かなくなった...こんなお悩みを解決します。TailwindCSSは今やかなりの人気を誇り、さまざまなプロジェクトで採用されています。私も個人プロジェクトで採用して開発を進めていたところ、急に特定のファイルでTailwindCSSが動かなくなる事態が発生しました。原因はなんてことなかったのですが、解決までに無駄に時間を浪費してしまったので、備忘録も込めて解決策を残しておこうと思います。同じ原因でTailwindCSSが動かなくなっている方の一助となれれば幸いです。解決策:TailwindCSSが効かない場合はtailwind.config.jsを確認せよ結論、tailwind.config.jsファイルでの設定を確認しましょう。具体的には、以下の部分です。このcontentのリストの中のパスを確認しましょう"./src/pages/**/*.{js,jsx,ts,tsx}","./src/components/**/*.{js,jsx,ts,tsx}",],TailwindCSSを使っている場合は、tailwind.config.jsファイルを扱っていると思いますが、その中のcontentキーの値が非常に重要になります。トマトソースここの値はTailwindCSSのセットアップ時に公式ドキュメントからコピペして、その後いじらないでそのままになっていることも多いかと思います。公式ドキュメントからコピペして終わっている方も多い、このtailwind.config.jsファイル。contentの値はTailwindCSSに認識してもらうファイルを知らせるために必要なため、かなり重要です。ここに記載がないものはTailwindCSSの適用対象外になり、クラス名を付与してもスタイルが適用されません。急にTailwindCSSが効かなくなったなんて時は一度ここの値を確認してみてください。トマトソース私の場合は、ここに"./src/templates/**/*.{js,jsx,ts,tsx}"という記載がなく、templates配下のファイルにTailwindCSSが効かず苦戦していました...tailwind.config.jsのcontentキーの値で見るべき箇所contentキーに設定する値としてみておくべき点としては、以下の2点をみておきましょう。contentキーの値で見るべき2点ディレクトリパスファイル拡張子それぞれ簡単に解説しておきます。contentキーの値で見るべき点1:ディレクトリパスTailwindCSSを適用したいファイルがあるディレクトリのパスを指定するようにしてください。このcontentのリストの中のパスを確認しましょう"./src/pages/**/*.{js,jsx,ts,tsx}","./src/components/**/*.{js,jsx,ts,tsx}",],という感じで、src配下のpagesとcomponents配下のjsやtsxファイルなどが対象となるように指定されています。トマトソースディレクトリの指定はtailwind.config.jsからの相対パスで良いです。contentキーの値で見るべき点2:ファイル拡張子contentキーの値で見るべき2つ目の点は、ファイルの拡張子です。このcontentのリストの中のパスを確認しましょう"./src/pages/**/*.{js,jsx,ts,tsx}","./src/components/**/*.{js,jsx}",],pages配下ではTypeScriptも対象とされていますが、components配下ではJavaScriptのみがTailwindCSSの対象となってしまいます。TailwindCSSを適用したいファイルの拡張子がしっかりと含まれているかを注意して確認しておきましょう。トマトソース基本的には、JSもTSもどちらも適用するかと思うので、*.{js,jsx,ts,tsx}と記載しておけばOKです。TailwindCSSが効かない場合はtailwind.config.jsを修正せよ:まとめ今回は、急にTailwindCSSが効かなくなった場合の対処法をお伝えしました。解決してみればなんてことない問題も、実際に問題が発生してから解決までに無駄に時間を使ってしまうこともしばしばあります。ChatGPTがあるとはいえ、助けにならない時もありますし。本記事が私と同じような問題に悩まれている方の解決に少しでも貢献できれば幸いです。