Zenn
⚡

Tailwind CSS v4.0 を Vite + React に導入する手順まとめ

に公開
CSS
React
Tailwind CSS
frontend
Vite
tech

はじめに

Tailwind CSS v4.0 では、これまでの構成と比べていくつかの変更点があります。
本記事では、Vite + React の環境に最新版 Tailwind を導入する手順をわかりやすく解説します。

対象読者

  • Vite + React プロジェクトに Tailwind を導入したい人
  • Tailwind v4.0 の新しい構成に戸惑っている人
  • とにかく最短で動く状態にしたい人

環境情報

  • Vite: 6.3.1
  • React: 19.0.0
  • Tailwind CSS: 4.1.4

1. プロジェクトのセットアップ（Vite + React）

プロジェクトを作成します。

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

package.jsonを参照すると、React:19.0.0、Vite:6.3.1がインストールされています。

2. Tailwind CSS v4.0 をインストール

@tailwindcss/viteをインストールします。v4.0ではPostCSSが不要になりました。

npm install @tailwindcss/vite

package.jsonを参照すると、@tailwindcss/vite:4.1.4がインストールされています。

3. vite.config.jsでTailwind CSSをインポート

@tailwindcss/viteをインポートします。

vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

4. src/index.cssでTailwind CSSをインポート

tailwindcssをインポートします。Tailwind CSS v4.0における大きな変更点の1つで、公式ではCSS-first configurationとして記載されています。

Tailwind CSS v4.0 における最も大きな変更点の 1 つは、プロジェクトを JavaScript で構成する方法から CSS で構成する方法に移行したことです。
ファイルの代わりにtailwind.config.js、Tailwind をインポートする CSS ファイルですべてのカスタマイズを直接構成できるため、プロジェクトで考慮するファイルが 1 つ減ります。

index.css
@import 'tailwindcss';
  /* ... */

動作確認

npm run devで開発サーバーを起動します。

npm run dev

任意のコンポーネントに className="bg-red-500"などを使って表示を確認します。今回はApp.jsxを使用してh1タグの背景色を赤色にします。

App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1 className='bg-red-500'>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

背景色が赤く表示されていれば、Tailwind CSSの導入は成功です！

まとめ

Tailwind v4.0 では細かな変更がありますが、基本の導入手順はシンプルです。
環境構築のつまずきを防ぐためにも、公式の更新情報やchangelogにも目を通しておくと安心です。

参考リンク

Discussion