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

要約

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

よくある原因

1. content パス漏れ: tailwind.config.js の content 配列にコンポーネントの実ファイルが入っていないと、その中で使ったクラスは最終 CSS に含まれない。
2. エントリ CSS 未設定: 3 つの @tailwind ディレクティブを書いた CSS が読み込まれていないと、そもそも Tailwind の CSS 自体が出力されない。
3. PostCSS プラグイン未登録: postcss.config.js に tailwindcss プラグインが入っていないと、ビルド結果に Tailwind 由来のクラスが現れない。
4. 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 タブ）に該当ユーティリティが含まれているかを確認する。