Windows11のWSL環境でTailwind CSS（v4.0.14）を動かそうとしたらハマったので殴り書きのメモを残しておく

# 【注意】最初にエクスキューズ的なの
原因の特定とかはちゃんとしてないです。

環境構築も、ほぼ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";`でよかったので関係なかった。

# 参考
 - https://tailwindcss.com/blog/tailwindcss-v4#simplified-installation
 - https://tailwindcss.com/docs/installation/tailwind-cli