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