【React】Tailwind CSS導入で init コマンドがエラーになる時の対処法（v4対応）

はじめに

Javaエンジニアが、React + TypeScriptの学習を始めた際の備忘録です。

Vite環境にTailwind CSSを導入しようとしたところ、ネット上の多くの記事にある手順（v3系）でエラーが発生し、解決に少し手間取ったため共有します。

発生した事象

Reactプロジェクト作成後、Tailwind CSSをインストールし、設定ファイル作成コマンドを実行したところエラーになりました。

実行したコマンド

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

発生したエラー

npm error could not determine executable to run
npm error A complete log of this run can be found in: /Users/.npm/_logs/2025-12-26T08_18_24_413Z-debug-0.log

「実行ファイルが見つからない」と言われました…

原因

package.json を確認すると、Tailwind CSSのバージョンが v4系 になっていました。

"devDependencies": {
  "tailwindcss": "^4.0.0", 
  ...
}

Tailwind CSS のバージョンアップにより、v4から導入手順が簡略化されていました。
そのため、従来の init コマンドを使った設定ファイル（tailwind.config.js）の作成手順は不要（または方法が異なる）だったようです。

解決策（v4での正しい導入手順）

v4では、Viteプラグインとして導入するのが正解でした。

1. 必要なパッケージのインストール

v4専用のViteプラグインをインストールします。

npm install tailwindcss @tailwindcss/vite

2. vite.config.ts の修正

vite.config.ts にプラグイン設定を追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // 追加

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(), // 追加
  ],
})

3. CSSファイルの修正

CSSファイル（src/index.cssなど）で読み込む記述も、v4ではシンプルになったみたいです。

@import "tailwindcss";

まとめ

v3系からv4系へのアップデートで、設定ファイル（config.js）が不要になり、Javaで言うところの「XML設定の多雑からアノテーションでスッキリした」ような感覚を覚えました。

古い記事（v3系の手順）もまだ多いため、init でエラーが出た際はバージョンを確認することをおすすめします。

参考

Tailwind CSSを使い始める

tailwindcssで「npm error could not determine executable to run」が出た際の解決策