tailwindcssが適用されていない

5月 11, 2025

tailwindcssをインストールしてもCSSが有効になっていないので、解決方法をChat GPTに確認した内容を記載する

私の質問

Chat GPTの回答

Tailwind CSS が「適用されていない」場合、原因はほぼ以下のいずれかです。順番にチェックしていきましょう。

✅ まず確認すべきこと（基本チェックリスト）

✅ 1. `tailwind.config.js` が存在しているか？

tailwind.config.js
postcss.config.js

どちらもあるか確認してください。

✅ 2. `tailwind.config.js` に `content` が正しく設定されているか？

以下のようになっている必要があります（Reactなら特に重要）：

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

🔺これがないと Tailwind はクラスを 削除（ツリーシェイク） してしまい、CSSが効かなくなります。

✅ 3. CSS ファイルに Tailwind のディレクティブを記述しているか？

/* src/index.css などに以下を書く */
@tailwind base;
@tailwind components;
@tailwind utilities;

✅ 4. `index.css` を React アプリに import しているか？

// src/index.js または src/main.jsx の上部で
import './index.css';

これがないと Tailwind は読み込まれません。

✅ 全体的なセットアップ構成（React + Tailwind）

my-app/
├── tailwind.config.js
├── postcss.config.js
├── src/
│   ├── index.css ← ここに @tailwind の記述
│   └── index.js ← ここで index.css を import

✅ 5. ビルドし直し（特に開発サーバがキャッシュしてる場合）

ターミナルで一度開発サーバを再起動してください：

npm run start

✅ 6. VSCode などで自動補完が出ない場合（でもCSSは効いてる）

これは Tailwind IntelliSense 拡張が入っていないだけです（無視してOK）。

🔧 効いていないか確かめるテスト

App.js に以下を追加して、文字色や余白が反映されていれば Tailwind は効いています。

<h1 className="text-3xl font-bold text-red-500 p-4">
  Tailwind 有効かテスト
</h1>

赤文字・大きいサイズで表示されればOK。

📌 それでもダメなときは

以下の内容を貼っていただければ、原因をピンポイントで特定できます：

tailwind.config.js の中身
index.css の中身
index.js の先頭付近（import './index.css' があるか）

もう一度まとめると：

@tailwind base; などが CSS にあるか
index.css を React が読み込んでいるか
tailwind.config.js の content に ./src/**/* が入っているか

一つずつ確認してみてください。もし内容を見てほしければ、貼ってもらえればチェックします！

Chat GPTの回答に対する補完

そもそも npx tailwindcss init - で初期化した後に生成される、tailwind.config.jsに手で設定を加える必要があることに気をつける必要がある

このブログを検索

技術メモ