はじめに
ChatGPTに相談しながらtailwindCSSをReactに導入しようとしたところ、
npx tailwindcss init -pコマンドでエラーが発生していました。
すこし苦労したので記事にします。
問題
下記コマンドを実行するとエラーが、、、
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
> 'tailwind' は、内部コマンドまたは外部コマンド、
> 操作可能なプログラムまたはバッチ ファイルとして認識されていません。
原因
TailwindCSSのバージョンが4系になったことで、
インストール方法が変わったようです。
2025/05/24 現在最新版のtailwindcssはv4.1です。
解決方法
下記のようにtailwindcss@3.4.13と3系のバージョン指定をすることで
従来通りとされる方法でインストールができました。
$ npm install -D tailwindcss@3.4.13 autoprefixer postcss
$ npx tailwindcss init -p
> Created Tailwind CSS config file: tailwind.config.js
> Created PostCSS config file: postcss.config.js
おわりに
これでtailwindcssを試すことができます！
@Sicut_study さんの記事のおかげで解決することができました。
深く感謝申し上げます。
npx tailwindcss initでnpm error could not determine executable to runエラーが出る
今後も学んだこと・つまずいたことを共有していきます。
どなたかの目に留まり助けとなれば幸いです。