【2025年最新】ReactとTailwind CSS v4の連携方法完全ガイド – Vite対応の新しい設定手順

こんにちは！今回は、ReactプロジェクトでTailwind CSSを使用する際につまずいたポイントと、その解決方法についてご紹介します。

特にTailwind CSS v4から変更された設定方法に焦点を当てていきます。

従来の方法（Tailwind CSS v3まで）

以前は、ReactプロジェクトでTailwind CSSを設定する際、以下のような手順で行っていました：

1. Tailwindの初期化

npx tailwindcss init -p

このコマンドでpostcss.config.jsとtailwind.config.jsが自動生成されます。

2. Tailwindの設定
   tailwind.config.js内のcontentセクションを編集し、Tailwindが適用されるファイルのパスを指定します：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意点として、srcディレクトリを使用しない場合は”./components/**/*.{js,ts,jsx,tsx}”のように、プロジェクト構成に合わせたパスを指定します。基本的に、classNameでスタイルを適用するファイルのパスをここに記述します。

3. CSSファイルの設定
   styles/globals.css（またはメインのCSSファイル）に以下のディレクティブを追加します：

@tailwind base;
@tailwind components;
@tailwind utilities;

これらのディレクティブはTailwindのスタイルをプロジェクトにインポートするためのものです。

問題点

しかし、この方法では最新のTailwind CSS v4ではうまく機能しないことがあります。

バージョン4からは設定方法が変更され、特にViteなどの最新のビルドツールと組み合わせる場合には新しいアプローチが必要になりました。

新しい方法（Tailwind CSS v4以降）

Tailwind CSS v4以降では、特にViteと組み合わせる場合、以下の手順で設定します：

1. 新しいReact+Viteプロジェクトの作成（必要な場合）

新規プロジェクトを作成する場合は、以下のコマンドを実行します：

npm create vite@latest my-react-tailwind-app -- --template react
cd my-react-tailwind-app

2. Tailwind CSSとViteプラグインのインストール

プロジェクトディレクトリで以下のコマンドを実行します：

npm install tailwindcss @tailwindcss/vite

これにより、TailwindとVite用のTailwindプラグインがインストールされます。

3. Viteの設定ファイルの編集

vite.config.jsまたはvite.config.tsファイルに、Tailwind CSSのプラグインを追加します：

// vite.config.js または vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

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

4. CSSファイルでTailwindをインポート

メインのCSSファイル（通常はsrc/index.cssまたはsrc/App.css）に、以下の一行を追加します：

@import 'tailwindcss';

これまでの@tailwind base;などの3行のディレクティブの代わりに、この1行だけで済むようになりました。

5. CSSファイルをインポート

アプリケーションのエントリーポイント（通常はsrc/main.jsxまたはsrc/main.tsx）で、CSSファイルをインポートします：

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'  // ここでCSSをインポート

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

6. Reactコンポーネントでの使用例

これで、Reactコンポーネント内でTailwindのクラスを使用できるようになります：

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-3xl font-bold text-blue-600 mb-4">
          Hello, Tailwind CSS v4!
        </h1>
        <p className="text-gray-600">
          Tailwind CSSをReactプロジェクトに正しく設定できました！
        </p>
      </div>
    </div>
  );
}

export default App;

注意点とトラブルシューティング

まとめ

Tailwind CSS v4では、Viteなどの最新のビルドツールとの統合が簡素化され、より直感的になりました。主な変更点は：

これらの新しいアプローチを理解することで、ReactとTailwind CSSを効率的に組み合わせることができます。

新しいプロジェクトを始める際は、ぜひこの方法を試してみてください！

お役に立てれば幸いです。何か質問やフィードバックがありましたら、コメントでお知らせください！