【Tailwind CSS v4】「カラーが効かない…」原因はこれだった！書き方が変わってた話

【Tailwind CSS v4】「color系が効かない…」原因はこれだった！書き方が変わってた話

最近 Tailwind CSS v4 にアップデートしたら、
bg-red-500 とか text-white とかのカラー系クラスが 全く効かない！ という現象にハマりました。

---

🤔 症状

• @tailwind base;
• @tailwind components;
• @tailwind utilities;

としっかり書いてるのに、背景色が全然反映されない。
ブラウザの devtools で CSS を見ても bg-* 系が出力されてない。

---

💡 原因：Tailwind v4 では CSS の書き方が変わってた！

Tailwind CSS v4 からは、CSSでの読み込み方法が 従来の3段構えから1行に統合されました。

✅ 従来（v3以前）

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

✅ Tailwind v4 以降（新しい書き方）

@import "tailwindcss";

たったこれだけ！
この1行に base, components, utilities が全部含まれているんです。

✏️ 最後に

この文章はchatGPTがすべて書いてくれました