はじめに

最近、FastAPI と連携するための簡単なフロントを Tailwind CSS で作ろうとしたんですが、
ただ CLI を使って導入したいだけなのに、思った以上にハマってしまったので備忘録としてまとめておきます。

環境はこちら：
• macOS（M1チップ）
• Node.js v18.20.2（n で管理）
• Tailwind CLI を使って output.css をビルドするシンプル構成

結論から言うと

npm 経由ではどう頑張っても CLI が使える状態にならなかったので、公式のバイナリを直に落としてきて解決しました。

ハマったポイント

① Node.js のバージョン、なぜか切り替わらない？

普段どおりに n で v18.20.2 を入れたはずなのに、
node -v してみたら…まさかの v18.15.0。なんで？！

bash.

node -v
# => v18.15.0

zsh.

export PATH="/usr/local/n/versions/node/18.20.2/bin:$PATH"

その後 source ~/.zshrc で反映。

② npx tailwindcss init -p がエラーになる

bash.

npm ERR! could not determine executable to run

→ tailwindcss をインストールしたはずなのに、node_modules/.bin/tailwindcss が存在しない。

bash.

ls node_modules/.bin/tailwindcss

=> No such file or directory

npm uninstall → install を何度繰り返しても改善されず、依存関係も問題なさそうなのに解決しない…。

解決策：バイナリを直で落とす
結局、以下の手順で公式 CLI を手動でセットアップ。

bash.

mkdir -p ./bin

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

mv tailwindcss-macos-arm64 ./bin/tailwindcss

chmod +x ./bin/tailwindcss

無事、./bin/tailwindcss が動作。やっと一息…！

bash.

./bin/tailwindcss -i ./src/input.css -o ./dist/output.css --watch

詰まったポイント	原因	解決法
Node.jsのバージョンが切り替わらない	Anacondaの `/bin/node` が優先されていた	`export PATH=...` を `.zshrc` に追記し、`source ~/.zshrc` で反映
`npx tailwindcss init -p` が動かない	tailwindcss の CLI が `node_modules/.bin` に存在しない	`tailwindcss` の公式バイナリをDLし、`./bin/tailwindcss` に手動配置
`open index.html` が開けない	ファイルのパスが違っていた or 作成されていなかった	`dist/index.html` を明示的に開く or 事前に自分で作成

さいごに

たった1つのツール導入でも、環境によってはこんなに時間を取られるんだと痛感しました。
この記事が同じように詰まってる方の助けになれば幸いです🙏