Tailwind CSS のクラスが効かない（スタイルが反映されない）の主な原因は？

・`tailwind.config.js` の `content` にコンポーネントの実ファイルパスが含まれていない・エントリ CSS に `@tailwind base; @tailwind components; @tailwind utilities;` を書いていない・PostCSS / Vite / Next.js の Tailwind プラグインがビルドパイプラインに入っていない・設定変更後に dev server を再起動しておらず JIT スキャナに反映されていない

Tailwind CSS のクラスが効かない（スタイルが反映されない）の解決策は？

・`tailwind.config.js` の `content` に `./src/**/*.{html,ts,tsx,js,jsx,vue}` 等を網羅的に列挙する・エントリ CSS（例: `src/index.css`）に 3 行の `@tailwind` ディレクティブを書き、アプリ起点で import する・`postcss.config.js` で `tailwindcss` と `autoprefixer` を有効化する（Next.js は `app/globals.css` 経由で自動）・dev server を再起動し、生成 CSS に対象クラスが含まれているかを DevTools で確認する

Tailwind CSS のクラスが効かない（スタイルが反映されない）

Q: Tailwind CSS のクラスが効かない（スタイルが反映されない） の主な原因は？

・`tailwind.config.js` の `content` にコンポーネントの実ファイルパスが含まれていない ・エントリ CSS に `@tailwind base; @tailwind components; @tailwind utilities;` を書いていない ・PostCSS / Vite / Next.js の Tailwind プラグインがビルドパイプラインに入っていない ・設定変更後に dev server を再起動しておらず JIT スキャナに反映されていない

Tailwind は content で指定したファイルをスキャンして使用クラスだけを CSS に含める。
content パスの抜け、@tailwind ディレクティブ未読込、PostCSS プラグイン未登録、設定変更後の再起動忘れの 4 系統が大半を占める。

#tailwindcss #content #configuration #jit #styles

公開: 2026-05-27更新: 2026-08-16

実行例あり（2026-08-16 に実環境で検証）

要約

Tailwind CSS のクラスが効かない場合、原因のほぼ全ては「JIT スキャン対象から外れている」「@tailwind ディレクティブを書いた CSS が読み込まれていない」「PostCSS パイプラインに Tailwind プラグインが入っていない」「設定変更後に dev server を再起動していない」の 4 つに集約される。
順に確認すれば大半は解決する。

よくある原因

content パス漏れ: tailwind.config.js の content 配列にコンポーネントの実ファイルが入っていないと、その中で使ったクラスは最終 CSS に含まれない。
エントリ CSS 未設定: 3 つの @tailwind ディレクティブを書いた CSS が読み込まれていないと、そもそも Tailwind の CSS 自体が出力されない。
PostCSS プラグイン未登録: postcss.config.js に tailwindcss プラグインが入っていないと、ビルド結果に Tailwind 由来のクラスが現れない。
dev server キャッシュ: 設定や content を変えても、再起動しないと JIT エンジンが旧状態のまま動き続ける。

解決策

1. content 配列を網羅的に書く

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./public/index.html",
  ],
  theme: { extend: {} },
  plugins: [],
};

公式の content configuration（新しいタブで開く）でも、テンプレート / コンポーネントを すべて網羅 することが第一原則と明記されている。
なお v2 時代の purge キーは v3 以降は content に名前が変わっている。

2. エントリ CSS に @tailwind ディレクティブ

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

この CSS をアプリのエントリ（main.ts / _app.tsx / app/layout.tsx 等）から import する。
読み込み忘れが意外と多い。

3. PostCSS パイプラインを整える

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Next.js は app/globals.css を app/layout.tsx 側で import するだけで自動的に組み込まれる。公式の PostCSS 手順（新しいタブで開く）も同構成。

4. dev server を再起動して DevTools で確認

# Ctrl+C で停止後
npm run dev

再起動後、DevTools の Elements / Styles でクラスが当たっているか、生成 CSS（Sources タブ）に該当ユーティリティが含まれているかを確認する。

実行例

content に src/ が含まれていないと、Tailwind は「No utility classes were detected in your source files」と警告を出し、生成された CSS に text-3xl の宣言が 1 つも現れない。
content をコンポーネントの実ファイルまで広げて同じコマンドを流し直すと、警告は消え、.text-3xl が font-size と line-height を伴って出力される。

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 
Done in 118ms.

$ grep -c "text-3xl" out.css
0
0 = 生成 CSS に text-3xl が含まれていない（JIT スキャン対象外）

$ npx tailwindcss -i src/input.css -o out.css
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 
Rebuilding...
 
Done in 127ms.

$ grep -c "text-3xl" out.css
1

$ grep -A2 "\.text-3xl" out.css
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;

— 2026-08-16 時点の出力

検証環境

検証日: 2026-08-16
実行環境: node:20

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

要約