📚

Vite + Tailwind CSS 初心者向け完全ガイド

に公開
Tailwind CSS
Vite
reactlaravelblog
no1
tech

はじめに

フロントエンド開発で「Vite」と「Tailwind CSS」という言葉を聞いたことがあるでしょうか？
この記事では、これらが何をしているのか、なぜ必要なのかを初心者向けに分かりやすく説明します。

そもそもViteとは？

Viteの役割

Viteは、モダンなフロントエンド開発のためのビルドツールです。

従来のビルドツール（Webpack）の問題

  • 起動が遅い: 大規模プロジェクトで数十秒かかる
  • ホットリロードが遅い: ファイル変更時の再ビルドが重い
  • 設定が複雑: webpack.config.jsが肥大化

Viteの解決策

  • 高速起動: ES Modulesを直接利用
  • 高速ホットリロード: 変更箇所のみ更新
  • シンプル設定: デフォルトで最適化済み

Vite vs Webpack 比較表

項目 Webpack（従来） Vite（現在）
起動時間 数十秒〜数分 1秒未満
ホットリロード 遅い（全体再ビルド） 高速（変更箇所のみ）
設定の複雑さ 複雑（webpack.config.js） シンプル（vite.config.ts）
開発体験 重い 軽快
ES Modules バンドル後 直接利用
学習コスト 高い 低い
設定ファイル webpack.config.js vite.config.ts

Viteの仕組み

// 開発時: ES Modulesを直接ブラウザに提供
import React from 'react'  // ブラウザが直接読み込み

// 本番時: Rollupでバンドル
// 最適化された単一ファイルに変換

Tailwind CSSはなぜビルドが必要？

Tailwind CSSの特徴

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。

問題: ファイルサイズが巨大

/* Tailwind CSSの全クラス（約3MB） */
.bg-red-500 { background-color: #ef4444; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #10b981; }
/* ... 数万行のCSS */

解決: 使用したクラスのみ抽出

<!-- HTMLで使用したクラス -->
<div class="bg-red-500 text-white p-4">
  Hello World
</div>

/* ビルド後: 使用したクラスのみ（数KB） */
.bg-red-500 { background-color: #ef4444; }
.text-white { color: #ffffff; }
.p-4 { padding: 1rem; }

ファイルサイズ比較表

状態 サイズ 説明
Tailwind CSS 全クラス ~3MB 全てのユーティリティクラス
ビルド後（使用クラスのみ） ~10KB 実際に使用したクラスのみ
削減率 99.7% 大幅なサイズ削減

ビルドプロセス

  1. HTML/JSXファイルをスキャン
  2. 使用されているTailwindクラスを検出
  3. 必要なCSSのみを生成
  4. 最適化して出力

Vite + Tailwind CSS v4 設定

技術スタック

  • Vite: 7.0.3（ビルドツール）
  • Tailwind CSS: 4.1.11（CSSフレームワーク）
  • 方式: Viteプラグイン方式（2024年春〜公式推奨）

設定手順

1. パッケージインストール

npm install tailwindcss @tailwindcss/vite

2. 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()],
})

3. CSSファイル

/* src/index.css */
@import "tailwindcss";

役割分担の詳細

Tailwind CSSの役割

  • TSXファイルをスキャン
  • 使用されているクラスを検出
  • 必要なCSSのみを生成

Viteの役割

  • Tailwindが生成したCSSをバンドル
  • その他のCSSファイルも含めて1つにまとめる

具体的な処理フロー

1. 開発者が書く

// App.tsx
<div className="bg-blue-500 text-white p-4">
  Hello World
</div>

2. ビルド時の処理

TSXファイル
    ↓
Tailwind: 「bg-blue-500, text-white, p-4を使っている」
    ↓
Tailwind: そのCSSを作る
    ↓
Vite: 全部のCSSを1つのファイルにまとめる

3. 結果

/* 最終的にブラウザに送られるCSS */
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }
.p-4 { padding: 1rem; }

なぜ最近変わったのか？

Tailwind CSS v4の登場（2024年春）

  • Viteネイティブ対応: PostCSS経由ではなく直接統合
  • パフォーマンス向上: ビルド時間の短縮
  • 設定の簡素化: 設定ファイルの削減

公式推奨の変更

  • 2024年春: @tailwindcss/viteプラグイン登場
  • 2024年夏: 公式ドキュメントで推奨に変更
  • 現在: Viteプラグイン方式が主流

従来方式との比較

従来方式（PostCSS経由）

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

新しい方式（Viteプラグイン）

// vite.config.ts のみ
import tailwindcss from '@tailwindcss/vite'

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

Tailwind CSS 設定方式比較表

項目 従来方式（PostCSS） 新しい方式（Viteプラグイン）
登場時期 2020年〜 2024年春〜
設定ファイル postcss.config.js + tailwind.config.js vite.config.tsのみ
必要なパッケージ tailwindcss + postcss + autoprefixer tailwindcss + @tailwindcss/vite
CSS記法 @tailwind base; @tailwind components; @tailwind utilities; @import "tailwindcss";
パフォーマンス 標準 高速
公式推奨 従来推奨 現在推奨
学習コスト 中 低

まとめ

Viteの役割

  • 高速な開発環境を提供
  • モジュールバンドリングを最適化
  • 複数のCSSファイルを1つにまとめる

Tailwind CSSのビルド

  • 使用したクラスのみを抽出
  • ファイルサイズを大幅削減
  • @import "tailwindcss"で全ての必要なCSSを展開

新しい設定方式

  • Viteプラグイン方式が公式推奨
  • 設定がシンプルになった
  • パフォーマンスが向上した

参考資料

作成日: 2025年7月9日

Discussion