つまっていたエラー&問題
- storybookのローカル画面がずっとロードになる
- インスペクタモードのネットワークに下記エラーが出力される
[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.
このエラーが起きた環境
- Next.js：15.3.0
- storybook：8.6.12
何が原因なのか
❶ postcss.config.mjs ファイルで require() や文字列指定していた点
- ESM（.mjs）形式では、require() や "plugin名" での指定はサポートされていません！
postcss.config.mjs
// NGな例
export default {
plugins: ["@tailwindcss/postcss"], // ← 文字列はNG（ESMでは使えない）
};
❷ Tailwind CSS v4 から PostCSS プラグインの仕様が変更された点
- Tailwind CSS v4 では、PostCSS 用プラグインが別パッケージに分離されました。
| バージョン | 使用するパッケージ |
|---|---|
| v3以前 | tailwindcssを直接指定 |
| v4以降 | @tailwindcss/postcss を明示的に指定 |
解決方法
① 必要なパッケージをインストール
npm install -D @tailwindcss/postcss autoprefixer
② postcss.config.mjs を修正
postcss.config.mjs
import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';
export default {
plugins: [tailwindcss, autoprefixer],
};
③ Storybook を再起動
npm run storybook
改めて
v4環境ではtailwindcssを直接 PostCSS に渡すのではなく、
@tailwindcss/postcss を経由して使う必要がありますが
環境構築段階ではこれが正しく設定されていないのでご自身で再設定しないといけません。