Zenn
📝

【2025年版】Tailwind CSS 4.x で「npx tailwindcss init -p」が動かない理由と解決方法

に公開
Tailwind CSS
tech

【2025年版】Tailwind CSS 4.x で「npx tailwindcss init -p」が動かない理由と解決方法

はじめに

Tailwind CSS をプロジェクトに導入しようとして、お馴染みの npx tailwindcss init -p コマンドを実行したら...

npm error could not determine executable to run

「意味わからん。何で？」

そんな経験をした方、多いのではないでしょうか？実は、Tailwind CSS 4.x では従来の設定方法が大幅に変更されています。この記事では、その理由と正しい解決方法を解説します。

何が変わったのか？

従来（Tailwind CSS 3.x まで）

# これが普通に動いていた
npx tailwindcss init -p

現在（Tailwind CSS 4.x 以降）

# これがエラーになる！
npx tailwindcss init -p
# → npm error could not determine executable to run

原因：アーキテクチャの大幅変更

Tailwind CSS 4.x では以下の変更が行われました：

  1. CLI コマンドの廃止: npx tailwindcss init コマンドが使用不可に
  2. PostCSS プラグインの分離: PostCSS プラグインが別パッケージ @tailwindcss/postcss に移動
  3. 手動設定が必要: 設定ファイルを手動で作成する必要がある
  4. CSS インポート方法の変更: 新しい @import 記法が推奨

解決方法

ステップ 1: 必要なパッケージをインストール

# Tailwind CSS 本体とPostCSSプラグインをインストール
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/postcss

ステップ 2: 設定ファイルを手動で作成

tailwind.config.js 

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js 

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

ステップ 3: CSS ファイルの設定

Tailwind CSS 4.x では @import 記法が必須

src/index.css（またはメインのCSSファイル）で：

@import "tailwindcss";

/* 既存のスタイル */

よくあるエラーと対処法

エラー 1: PostCSS プラグインエラー

[postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. 
The PostCSS plugin has moved to a separate package...

解決方法: @tailwindcss/postcss パッケージをインストールして、postcss.config.js を正しく設定する。

エラー 2: 実行ファイルが見つからない

npm error could not determine executable to run

解決方法: CLI コマンドは廃止されているので、手動で設定ファイルを作成する。

エラー 3: スタイルが適用されない

解決方法: CSS ファイルで @import "tailwindcss"; または @tailwind ディレクティブが正しく記述されているか確認する。

動作確認

設定が完了したら、コンポーネントでTailwindクラスをテストしてみましょう：

// App.tsx
function App() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <button className="bg-blue-500 hover:bg-blue-700 text-white px-8 py-4 text-xl rounded-lg">Click me</button>
    </div>
  )
}

export default App

まとめ

Tailwind CSS 4.x での変更点：

  • ❌ npx tailwindcss init -p コマンドは廃止
  • ✅ 設定ファイルを手動で作成する
  • ✅ @tailwindcss/postcss パッケージが必要
  • ✅ @import "tailwindcss"; の新記法が推奨
  • ✅ 従来の @tailwind ディレクティブも使用可能

最初は「意味わからん」と思うかもしれませんが、一度設定してしまえば従来通り快適に使用できます。

参考リンク

この記事が同じ問題で困っている方の助けになれば幸いです！質問やフィードバックがあれば、コメントでお気軽にどうぞ。

Discussion