npx tailwindcss initでnpm error could not determine executable to runエラーが出る

はじめに

TailwindCSSをReactに導入する際にエラーが出たので記事にします

問題

今までどおりインストールコマンドを叩いたらエラーが出てしまいました

$ npm install -D tailwindcss autoprefixer postcss
$ npx tailwindcss init -p
npm error could not determine executable to run
npm error A complete log of this run can be found in: /home/jinwatanabe/.npm/_logs/2025-01-26T01_25_28_159Z-debug-0.log

解決方法

TailwindCSSのバージョンが4系になってインストール方法が大幅に変わりました

いままでよりも簡単になっています

もし今まで通りにセットアップするなら

$ npm install -D tailwindcss@3.4.13 autoprefixer postcss
$ npx tailwindcss init -p

3系を指定すれば大丈夫です！

おわりに

これまでのハンズオンが動かなくなってしまうのだけが辛いところです。