---
title: "Tailwind CSSのクラスが当たらない・一部だけ効くときの対処"
description: "Tailwindのクラスを書いたのにスタイルが当たらない、ローカルでは効くのに共有先で崩れると困っている開発者向け。CDN版とビルド版の差やコンテンツスキャン設定の原因を特定できる記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/tailwind-cdn-styles-missing"
markdown: "https://giga-site.com/articles/tailwind-cdn-styles-missing/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Tailwind CSSのクラスが当たらない・一部だけ効くときの対処

Tailwind CSSで「クラスを書いたのにスタイルが当たらない」「ローカルでは効くのに共有先で崩れる」という相談は後を絶ちません。原因の多くはCDN版とビルド版の差、コンテンツスキャンの設定漏れ、クラス名の動的生成にあります。この記事では切り分けの順序を整理します。

> Source HTML: https://giga-site.com/articles/tailwind-cdn-styles-missing
> Article index: https://giga-site.com/articles/index.md

## まず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の反映確認のやり取りを短くできます。

## よくある質問

### CDN版では効くのにビルドすると効かなくなるのはなぜですか。

CDN版は全ユーティリティをブラウザ上で解釈しますが、ビルド版は実際に使われているクラスだけを抽出します。content設定でスキャン対象に含まれていないファイルのクラスは出力から削除されるため、設定漏れが主な原因です。

### 変数で組み立てたクラス名が効きません。

Tailwindはコードを静的に走査するため、文字列連結で作ったクラス名は検出できません。条件ごとに完全なクラス名を書き切るか、セーフリストに候補を登録してください。

### クラスは出力されているのに見た目が変わりません。

自前CSSや他フレームワークの指定がCSSの詳細度でTailwindを上書きしている可能性があります。開発者ツールで打ち消し線の付いた宣言を探し、競合元を特定してください。

### 修正したのに相手の画面に反映されません。

ブラウザキャッシュやビルド前ファイルを見ている場合があります。ビルド後の成果物を共有し、強制再読み込みで確認してもらってください。共有URLで同一の成果物を見せると環境差を排除できます。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [スマホで全体が極端に小さく表示されるときの対処（viewport設定）](https://giga-site.com/articles/viewport-meta-missing-mobile-tiny/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)
- [iframeが表示されないときの原因と対処](https://giga-site.com/articles/iframe-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Tailwind CSSのクラスが当たらない・一部だけ効くときの対処",
  "description": "Tailwindのクラスを書いたのにスタイルが当たらない、ローカルでは効くのに共有先で崩れると困っている開発者向け。CDN版とビルド版の差やコンテンツスキャン設定の原因を特定できる記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/tailwind-cdn-styles-missing",
  "url": "https://giga-site.com/articles/tailwind-cdn-styles-missing",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CDN版では効くのにビルドすると効かなくなるのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CDN版は全ユーティリティをブラウザ上で解釈しますが、ビルド版は実際に使われているクラスだけを抽出します。content設定でスキャン対象に含まれていないファイルのクラスは出力から削除されるため、設定漏れが主な原因です。"
      }
    },
    {
      "@type": "Question",
      "name": "変数で組み立てたクラス名が効きません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Tailwindはコードを静的に走査するため、文字列連結で作ったクラス名は検出できません。条件ごとに完全なクラス名を書き切るか、セーフリストに候補を登録してください。"
      }
    },
    {
      "@type": "Question",
      "name": "クラスは出力されているのに見た目が変わりません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "自前CSSや他フレームワークの指定がCSSの詳細度でTailwindを上書きしている可能性があります。開発者ツールで打ち消し線の付いた宣言を探し、競合元を特定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "修正したのに相手の画面に反映されません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザキャッシュやビルド前ファイルを見ている場合があります。ビルド後の成果物を共有し、強制再読み込みで確認してもらってください。共有URLで同一の成果物を見せると環境差を排除できます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```