【Tailwind4】" npx tailwindcss init -p " でファイルが自動生成されずにエラーとなった場合の解決方法

開発環境

・react：v19
・node：v20.19.1
・パッケージ管理ツール npm：v10.8.2
・開発サーバー・ビルドツール vite：6.3.1

エラー内容

npm error could not determine executable to run
npm error A complete log of this run can be found in: /Users/{ユーザ名}/.npm/_logs/2025-04-28T02_31_27_394Z-debug-0.log

結論

Tailwind v4からCLIツールが別パッケージに分離され、明示的なインストールが必要になったため

解決方法

Tailwind CLIを明示的にインストールする

npm install -D tailwindcss-cli

※Tailwind本体のインストールがまだの方はこちら
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

node_modules/.bin配下に「tailwindcss-cli」が作られている事を確認。

改めてコマンドを実行（ただし、taiwindcssではなくtailwindcss-cli）

npx tailwindcss-cli init -p

❌　npx tailwindcss init -p

下記レスポンスが返ってきたらファイルの自動生成が成功！

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

おまけ（設定の例）

・index.css

@import "tailwindcss";

・postcss.config.js

import tailwindcss from "@tailwindcss/postcss";
import autoprefixer from "autoprefixer";

export default {
  plugins: [tailwindcss(), autoprefixer()],
};

・tailwind.config.js

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

・依存関係（tailwind関連）

"devDependencies": {
    "@tailwindcss/postcss": "^4.1.7",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.7",
    "tailwindcss-cli": "^0.1.2",
}