Tailwind CSS v4 で PostCSS 設定がエラーになる

要約

Tailwind v3 から v4 に上げた直後にビルドで It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package と出るのは、v4 が PostCSS プラグインを @tailwindcss/postcss に分離したためです。
設定ファイルを移行ガイドどおりに書き換えます。

npm i -D @tailwindcss/postcss

// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

よくある原因

1. v3 のままの postcss.config.js: v3 では plugins: { tailwindcss: {}, autoprefixer: {} } で動いたが、v4 ではこの書き方はエラーになる。
2. 古いチュートリアル: ネット上の記事は v3 ベースのものが多く、そのままコピペすると v4 で破綻する。
3. Vite 向けの最適パスを通っていない: Vite 環境では @tailwindcss/vite プラグインに切り替えるのが推奨で、PostCSS 設定自体が不要になる。
4. CSS エントリの書き方: @tailwind base; などの 3 つのディレクティブも @import "tailwindcss"; に統合された。

解決策

1. PostCSS 経由のままなら @tailwindcss/postcss

npm i -D @tailwindcss/postcss

// postcss.config.js
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

詳細は公式 PostCSS インストールガイドを参照してください。

2. Vite では @tailwindcss/vite プラグイン

npm i -D @tailwindcss/vite

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [tailwindcss()],
});

このパスを通せば postcss.config.js は削除して構いません。

3. CSS エントリを統合

v4 では 3 つの @tailwind ディレクティブが 1 行にまとまりました。

/* before (v3) */
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* after (v4) */
@import "tailwindcss";

v3 → v4 の全体的な変更点は公式アップグレードガイドに集約されています。