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