Tailwind CSS v4 + Next.js Canary 環境でのプラグイン設定トラブルシューティング

目的

Next.js (v15 Canary) + React (v19 Canary) 環境で、react-markdown コンテンツを @tailwindcss/typography の prose クラスでスタイリングする。

問題

1. prose クラスが効かず、スタイルが適用されない
2. TailwindCSSは動作するが、設定ファイルtailwind.config.ts が見つからない。また、node_modules/.bin/tailwindcss や tailwind/cli.js とかが生成されていない。
3. npx tailwindcss init -p を実行するが、could not determine executable エラーで設定ファイルを生成できなかった。
4. 環境変更 (Volta→nvm) や依存関係再構築でも解決しなかった。

これらの問題に対し、主にチャットボットの提案に従って進めたが、根本原因の特定には至らなかった。

解決のきっかけ

各種問題が解決しないため、Tailwind CSS v4 のプラグイン設定方法をググると、v4 ではプラグインの追加方法が変更されていることが分かった。

app/global.css に @plugin をつけて指定すると有効化できた。

@import "tailwindcss";
@import "tw-animate-css";
...
+@plugin '@tailwindcss/typography';

反省

エラー発生時、チャットボットの回答だけで行き詰まった際は、Google検索や公式ドキュメント確認など他の情報源も活用する必要があると学んだ。バイブコーディングは便利だが、今回のようにAI（チャットボット）だけでは特定・解決困難だった仕様変更や環境依存のエラーに直面することもあるため、柔軟に対応できるようエラー対応は様々な手段で調査するようにしたい。

参照リンク

• Zenn: Tailwind CSS v4 での外部プラグインの追加方法