はじめに
Next.jsでTailwind CSSをインストールした際に発生したエラーについての記事です。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
問題
Next.jsの公式ドキュメントに従ってTailwind CSSをインストールしました。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
しかし、インストール後に以下のエラーが発生しました。
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
解決方法
Tailwind CSSのバージョン変更により、インストール方法が変わったようです。
以下のコマンドで必要なパッケージを追加した後、公式ドキュメントに従い設定を行うことで、エラーが解消されました。
npm install tailwindcss @tailwindcss/postcss postcss
終わりに
Tailwind CSSの仕様変更により、従来のインストール手順ではエラーが発生することがあるようです。今後も最新の情報をキャッチアップしながら、適切な設定方法を学んでいきたいと思います。
参考
『npx tailwindcss initでnpm error could not determine executable to runエラーが出る』Qiita