Tailwind CSSのクラスが当たらない・一部だけ効くときの対処

まずCDN版かビルド版かを確認する

Tailwindの導入方法は大きく二つあります。一つはscriptタグで読み込むCDN版（Play CDN）、もう一つはPostCSSやCLIでCSSを生成するビルド版です。両者は挙動が異なるため、まず自分がどちらを使っているかを把握することが切り分けの第一歩になります。

CDN版はブラウザ上でクラスを動的に解釈するため、ほぼすべてのユーティリティが即座に効きます。一方でファイルサイズが大きく、本番運用には推奨されていません。あくまで試作や検証用と位置づけられています。

ビルド版は使用中のクラスだけを抽出して最小化するため、設定ファイルでスキャン対象を正しく指定しないと、書いたはずのクラスが出力CSSから消えてしまいます。「一部だけ効かない」現象の典型的な原因がこれです。

コンテンツスキャンの設定漏れを疑う

ビルド版で特定のクラスだけ効かない場合、設定ファイルのcontent（旧purge）に対象ファイルが含まれていない可能性が高いです。HTMLやコンポーネントのパスがglobパターンから外れていると、そのファイル内のクラスは抽出されません。

新しく追加したディレクトリ、別リポジトリから読み込むテンプレート、CMSから差し込まれる文字列などは特に漏れやすい箇所です。スキャン対象を広げてから再ビルドすると改善することがあります。

症状別チェック表

Tailwind CSSのクラスが当たらない・一部だけ効くは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

動的なクラス名の落とし穴

Tailwindはソースコードを静的に走査してクラス名を探します。そのため文字列連結で組み立てたクラス名は検出されません。たとえば変数とプレフィックスを結合して色クラスを作るような書き方では、完成形のクラスがコード上に存在しないため抽出対象から外れます。

対策はクラス名を分割せず、条件分岐ごとに完全なクラス名を書き切ることです。安全な候補をあらかじめ列挙しておくセーフリストの仕組みを使う方法もあります。

記述ミスと優先順位の確認手順

クラス名のスペルミス、存在しないユーティリティ、任意値の角括弧の閉じ忘れなども効かない原因になります。また、自前のCSSや他フレームワークの指定がTailwindのスタイルをCSSの詳細度で上書きしているケースもあります。

次の順で確認すると効率的です。

1. ブラウザの開発者ツールで対象要素を選び、クラスが実際に適用されているか確認する
2. 適用されていなければ出力CSSに該当クラスが存在するか検索する
3. 存在しなければcontent設定と動的クラス名を見直す
4. 存在するが効かないなら詳細度の競合や!importantの有無を確認する
5. 修正後にビルドし直し、キャッシュをクリアして再読み込みする

確認用URLで環境差を切り分ける

「自分の環境では効くのに、相手の画面では崩れる」という報告は、キャッシュやビルド前のファイルを見ていることが原因の場合があります。確認時はビルド後の成果物を、関係者全員が同じ状態で見られるようにするのが近道です。

ギガサイト便なら、ビルド済みのHTMLやCSS/JSを含むZIPをドロップするだけで共有URLが発行され、同じURLのままファイルを差し替えられます。修正版をアップし直せばリンクを送り直さずに最新表示を確認してもらえるため、Tailwindの反映確認のやり取りを短くできます。