Tailwind CSS v4.0 + Vite で React + TypeScript 環境を構築する

約 12 分で読めます

2025 年にリリースされた Tailwind CSS v4.0 は、従来のバージョンから大幅にアップデートされ、設定の簡素化とパフォーマンスの向上を実現しました。この記事では、最新の Tailwind CSS v4.0 を使って Vite + React + TypeScript 環境を効率的に構築する方法を解説します。

Tailwind CSS v4.0 の主要な変更点

パフォーマンスの大幅向上

  • フルビルドが最大 5 倍高速化
  • インクリメンタルビルドは 100 倍以上の高速化
  • Lightning CSS による最適化

設定の簡素化

  • 設定ファイル不要（Zero Configuration）
  • CSS ファイル 1 行でのセットアップ
  • テンプレートファイルの自動検出

モダン Web 技術への対応

  • Cascade Layers 対応
  • CSS Custom Properties の活用

環境構築手順

ステップ 1: Vite プロジェクトの作成

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

ステップ 2: Tailwind CSS v4.0 のインストール

npm install tailwindcss @tailwindcss/vite

ステップ 3: Vite 設定の更新

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 ファイルの設定

src/index.css の内容を以下の 1 行に置き換えます。

@import "tailwindcss";

従来の @tailwind base; @tailwind components; @tailwind utilities; は不要になりました。

ステップ 5: 動作確認

src/App.tsx を更新してテストします。

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 flex items-center justify-center">
      <div className="bg-white p-8 rounded-xl shadow-2xl max-w-md text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">
          Tailwind CSS v4.0
        </h1>
        <p className="text-gray-600 mb-6">
          Vite と React で構築された高速開発環境
        </p>
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors">
          始めましょう
        </button>
      </div>
    </div>
  )
}

export default App
npm run dev
# http://localhost:5173 で確認

v4.0 と従来版の比較

設定ファイルの違い

v3.x（従来版）:

// tailwind.config.js が必要
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

v4.0（新版）:

/* 設定ファイル不要、CSS 内で直接設定 */
@import "tailwindcss";

カスタマイゼーション方法

CSS Variables での色定義

@import "tailwindcss";

:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
}

テーマのカスタマイズ

@import "tailwindcss";

@layer utilities {
  .text-gradient {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

実際のコンポーネント例

Button コンポーネント（型安全）

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'outline';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ variant, size, children }) => {
  const variantClasses = {
    primary: "bg-blue-500 hover:bg-blue-600 text-white",
    secondary: "bg-gray-500 hover:bg-gray-600 text-white",
    outline: "border-2 border-blue-500 text-blue-500 hover:bg-blue-50"
  }

  const sizeClasses = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2",
    lg: "px-6 py-3 text-lg"
  }

  return (
    <button className={`font-semibold rounded-lg transition-colors ${variantClasses[variant]} ${sizeClasses[size]}`}>
      {children}
    </button>
  )
}

Card コンポーネント

interface CardProps {
  title: string;
  description: string;
  imageUrl?: string;
  actions?: React.ReactNode;
}

export const Card: React.FC<CardProps> = ({ title, description, imageUrl, actions }) => {
  return (
    <div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
      {imageUrl && (
        <img src={imageUrl} alt={title} className="w-full h-48 object-cover" />
      )}
      <div className="p-6">
        <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
        <p className="text-gray-600 mb-4">{description}</p>
        {actions && <div className="flex gap-2 justify-end">{actions}</div>}
      </div>
    </div>
  )
}

よくある問題と解決策

スタイルが適用されない

src/main.tsx で index.css がインポートされているか確認します。

// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css' // 必須
import App from './App.tsx'

ビルド時のエラー

Vite の設定でプラグインの順序を調整します。

export default defineConfig({
  plugins: [
    tailwindcss(), // React プラグインより前に配置
    react(),
  ],
})

キャッシュ関連のトラブル

rm -rf node_modules package-lock.json
npm install
npm run dev -- --force

まとめ

Tailwind CSS v4.0 は従来版から大幅に改善され、より簡単で高速な開発体験を提供します。

  • 設定の簡素化: 設定ファイル不要、CSS 1 行でセットアップ完了
  • パフォーマンス向上: 最大 5 倍のビルド高速化、Lightning CSS による最適化
  • 開発体験の向上: Vite プラグインによる HMR 対応、TypeScript との完全互換性

新しいプロジェクトでは積極的に v4.0 を採用し、効率的なフロントエンド開発を実現しましょう。

関連記事