Tailwind CSS v4 でCSSが当たらない時の対処法（Vite + React + TypeScript

Tailwind CSS v4 で CSS が効かないときの対処法【Vite + React】

Tailwind CSS v4 にしてから @tailwind base; と書いても CSS が反映されず困ったので、原因と解決法をまとめます。

---

💥 症状

• class="flex" などを書いても見た目が変わらない
• エラーは出ない
• <style> タグはあるけど中身が空

---

✅ 原因

Tailwind CSS v4 からは、@tailwind base; などのディレクティブが使えなくなりました。
代わりに @import "tailwindcss"; を使う必要があります。

---

🔧 解決方法

src/index.css を以下のように修正：

- @tailwind base;
- @tailwind components;
- @tailwind utilities;

+ @import "tailwindcss";