【注意】最初にエクスキューズ的なの
原因の特定とかはちゃんとしてないです。
環境構築も、ほぼCursorとChatGPTの言いなりでやってたので、「とりあえずこのへんやったら動いた」みたいなメモを残しておきます。
詳しく調べた方いたら、ぜひ続きを書いてくださいｗ
目標
tailwindcssコマンドを動かす！この一点のみですｗ
環境
- Windows 11 Home 24H2
- WSL2（Ubuntu 24.04.1 LTS）
- Tailwind CSS（v4.0.14）
ハマった問題
なぜかnode_modules/.bin配下にtailwindcss関連がインストールされない。ので、tailwindcssが通らない。こんな感じ：
~/tailwind-test$ ls -l node_modules/.bin
ls: cannot access 'node_modules/.bin': No such file or directory
最初のエラーは以下から始まった：
$ npx tailwindcss
npm error code ERR_INVALID_URL
npm error Invalid URL
npm error A complete log of this run can be found in: C:\Users\XXXXX\AppData\Local\npm-cache\_logs\2025-03-13T16_53_43_764Z-debug-0.log
原因っぽいこと（たぶん）
- WSL環境のUbuntuにあるNode.jsではなく、Windows側のNode.jsを動かしてたっぽい
-
npm install --save-dev tailwindcss@latestとかをひたすらやってたんだけど、cliがインストールできてなかった
解決までにやったこと（たぶん）
- Windows側Node.jsアンインストール
- 一応npmとかnvmとかもアップデート
-
npm install tailwindcss @tailwindcss/cliの実行←これが最後の決め手だった（/cliを別で入れないといけなかった）
もーちょい具体的なこと
Node.jsをアンインストールした後もダメだった状態で以下みたいな感じだった：
~$ npm --version
10.8.2
~$ node --version
v18.20.6
特にnpm doctorが芳しくない：
~$ npm doctor
Connecting to the registry
Ok
Checking npm version
Not ok
Use npm v11.2.0
Checking node version
Not ok
Use node v22.14.0 (current: v18.20.6)
Checking configured npm registry
Ok
using default registry (https://registry.npmjs.org/)
Checking for git executable in PATH
Ok
/usr/bin/git
Checking for global bin folder in PATH
Ok
/usr/bin
Checking permissions on cached files (this may take awhile)
Ok
Checking permissions on local node_modules (this may take awhile)
Ok
Checking permissions on global node_modules (this may take awhile)
Ok
Checking permissions on local bin folder
Ok
Checking permissions on global bin folder
Ok
Verifying cache contents (this may take awhile)
npm warn doctor verifyCachedFiles Content garbage-collected: 2 (8992275 bytes)
npm warn doctor verifyCachedFiles Cache issues have been fixed
Ok
verified 59 tarballs
npm error Some problems found. See above for recommendations.
npm error A complete log of this run can be found in: /home/XXXXXX/.npm/_logs/2025-03-16T15_33_29_569Z-debug-0.log
ここからChatGPTに言われるがまま
# 最新のnvmをインストール（未導入なら）
curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
source ~/.bashrc
# 最新のNode.js（22系）をインストール
nvm install 22
nvm use 22
nvm alias default 22
# バージョン確認
node --version # v22.14.0 になっているかチェック
npm install -g npm@latest
sudo apt-get remove --purge nodejs npm
をやってから
npm doctor
をすると全部OKになった。
この後に
:~/tailwind-test$ npm install tailwindcss @tailwindcss/cli
added 25 packages, and audited 27 packages in 5s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
からの
~/tailwind-test$ ls -l node_modules/.bin
total 0
lrwxrwxrwx 1 ＊＊＊ ＊＊＊ 33 Mar 17 00:52 detect-libc -> ../detect-libc/bin/detect-libc.js
lrwxrwxrwx 1 ＊＊＊ ＊＊＊ 24 Mar 17 00:52 jiti -> ../jiti/lib/jiti-cli.mjs
lrwxrwxrwx 1 ＊＊＊ ＊＊＊ 34 Mar 17 00:52 tailwindcss -> ../@tailwindcss/cli/dist/index.mjs
でなんかいけそうになって、テキトーなinput.cssを作って
npx tailwindcss build input.css -o output.css
でエラー無く一応動いたのでヨシ！！！
その他
ChatGPTに最初のエラーを見せた段階で
@tailwind base;
@tailwind components;
@tailwind utilities;
と書きなさいと言われて
@import "tailwindcss";
という書き方がダメなのかと思ったけど、Tailwind CSSのv4とかだと@import "tailwindcss";でよかったので関係なかった。