はじめに

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です。

Tailwind CSS 公式サイト

解決方法

下記のように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エラーが出る

今後も学んだこと・つまずいたことを共有していきます。
どなたかの目に留まり助けとなれば幸いです。