tailwind css導入時のエラー（npx tailwindcss init -p）

発生した経緯

tailwind cssをReact × Vite環境に導入しようとしたところ、エラーが発生した。

実行したコマンド

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

エラー内容

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\username\AppData\Local\npm-cache\_logs\2025-03-11T06_23_53_523Z-debug-0.log

考えられる原因

tailwind cssの最新バージョンv4が公開され、インストール方法が変更されていた(2025/1/22)

解決方法

公式ドキュメントに従い、以下のコマンドで導入した。

npm install tailwindcss @tailwindcss/vite

後の手順も、公式ドキュメントの通り。

おわりに

プロジェクトを作る段階でつまるとすごく萎える...ネット上に転がっている記事だと基本v3のコマンドなので、注意が必要そう。公式ドキュメント大事。