`tailwindcss` を PostCSS プラグインとして直接使うなエラーの解決法 ✨

Tailwind CSS v4 で突然ビルドが止まる…?!

TL;DR

• 症状: vite / postcss ビルド時に

  It looks like you're trying to use tailwindcss directly as a PostCSS plugin …

• 原因: Tailwind CSS v4 から PostCSS プラグインが本体から分離

• 解決:

  1. npm i -D @tailwindcss/postcss

  2. postcss.config.js を下記に書き換え

     export default {
       plugins: {
         '@tailwindcss/postcss': {},
         autoprefixer: {},
       },
     }
     

  3. npm run dev で復活🙌

---

1. 開発環境

ツール	バージョン
macOS	Sonoma 15.5 (ARM)
Node	20.x
npm	10.x
Vite	5.x
Tailwind CSS	4.0.0-latest

---

2. エラー全文

[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

ビルドが強制終了し、ブラウザは真っ白……😱

---

3. 原因を深掘り

• v4 からの Breaking Change で PostCSS 連携用プラグインが分割
• 本体 (tailwindcss) は CLI & JIT 専用ランタイムへ
• 旧来の tailwindcss: {} 設定は無効化 → PostCSS がプラグインを解決できずエラー

---

4. 解決手順 (コピペ OK)

4-1. 依存追加

npm install -D @tailwindcss/postcss

4-2. PostCSS 設定

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

4-3. 再起動

npm run dev   # vite

これで text-red-500 などのユーティリティクラスが復活！

---

5. v3 → v4 移行時の注意点まとめ

項目	v3 以前	v4
PostCSS プラグイン	tailwindcss	@tailwindcss/postcss
CLI 同梱	✅	✅ (本体のみ)
content 設定	そのまま	そのまま
@apply	そのまま	そのまま

---

6. よくあるハマりポイント

1. plugin キーを文字列にするのを忘れる → plugins: { @tailwindcss/postcss: {} } は SyntaxError
2. キャッシュが残る → rm -rf node_modules/.vite で一度クリア
3. postcss.config.cjs で書いている → module.exports = { plugins: { '@tailwindcss/postcss': {} } }

---

7. 参考リンク

• Tailwind CSS v4 Release Notes
• 公式ドキュメント: Using with PostCSS

---

8. まとめ

Tailwind v4 へのアップデートで突然ビルドが落ちたら、まずは @tailwindcss/postcss が入っているかを確認しましょう。設定を 2 行直すだけで現場復帰できます！

この記事が役に立ったら LGTM 👍 をお願いします！