Tailwind v4 + Vite：5分で完了する完全設定テンプレート

はじめに

昨年、新しいプロジェクトで Tailwind を設定していた時のことです。tailwind.config.js の content パスを修正していて、30分も格闘していました。「もっと簡単にならないかな」と思ったのを覚えています。

今年、Tailwind v4 が登場し、本当にそれを実現しました。

今では、たった3行のコードで完全な Tailwind プロジェクトが動きます。PostCSS の設定も tailwind.config.js も不要。どのファイルをスキャンするか手動で指定する必要すらありません。初めてこの変化を見た時、正直、信じられませんでした。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

この記事は、その30分の格闘を省くためのものです。完全なテンプレートと、半年使ってきて使い心地の良いディレクトリ構成を提供します。

1. なぜ Tailwind v4 + Vite を選ぶのか？

1.1 v4 は本当に速いのか？

公式では、ビルド速度が10倍向上したと発表しています。実際に試してみると、中規模プロジェクトで8秒から1秒未満に短縮されました。この向上は、新しい Oxide エンジンによるものです。Rust 製である点からも、納得の性能です。

しかし、さらに嬉しいのは設定の簡素化です。以前は新しい Tailwind プロジェクトを作る際、tailwind.config.js、postcss.config.js、Vite の設定、そして CSS ファイルの @tailwind ディレクティブの4つを修正していました。今は？1つのファイルを変更するだけで済みます。

1.2 Vite の速さは伊達ではない

Vite の開発サーバーは、ほぼ瞬時に起動します。ホットリロード（HMR）も非常に速く、CSS を変更してページを更新しても、遅延はほとんど感じられません。日々の開発体験の向上は、一度味わうと元に戻れません。

1.3 v3 vs v4：一目瞭然な比較

まず、この表を見てください：

おわかりでしょうか？v4 の核となるアイデアは、設定を JS から CSS に移したことです。これが何を意味するか？スタイルを書くときに、ついでに設定も変更できるようになり、2つのファイルを行き来する必要がなくなりました。

2. 5分で完了する設定テンプレート

準備はいいですか？始めましょう。

2.1 プロジェクトの初期化

ターミナルを開いて、以下を実行してください：

# TypeScript テンプレートで新しい Vite プロジェクトを作成
npm create vite@latest my-project -- --template vanilla-ts

# プロジェクトディレクトリに移動
cd my-project

# 依存関係をインストール
npm install

このステップは約30秒です。

2.2 Tailwind v4 のインストール

# Tailwind CSS と公式 Vite プラグインをインストール
npm install tailwindcss @tailwindcss/vite

これだけです。postcss も autoprefixer も不要。v4 にはすでに組み込まれています。

2.3 Vite の設定

vite.config.ts を開いて、以下のように変更してください：

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  // Tailwind プラグインを追加するだけ
  plugins: [tailwindcss()],
})

3行のコード。本当にこれだけです。

2.4 CSS ファイルの作成

src/styles/ に main.css を作成します：

/* src/styles/main.css */

/* Tailwind をインポート — この1行で基本スタイルが完了 */
@import "tailwindcss";

/* カスタムテーマ設定（オプション）*/
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
}

@theme ブロックは v4 の新しい構文です。ここで独自の色、フォント、スペーシングなどを CSS 変数として定義できます。以前 tailwind.config.js を書くよりも直感的です。

2.5 CSS のインポート

src/main.ts を開いて、先頭に1行追加してください：

// src/main.ts
import './styles/main.css'

// 元のコード...

2.6 動作確認

index.html またはページコンポーネントで試してみましょう：

<div class="bg-primary text-white p-4 rounded-lg">
  Tailwind v4 が動きました！
</div>

そして実行：

npm run dev

ブラウザを開いて、青い背景のカードが表示されれば設定成功です。時間を計りましたが、本当に5分以内で動きます。

3. 推奨ディレクトリ構成

プロジェクトが動いたら、以下のようにファイルを整理することをお勧めします：

3.1 完全なディレクトリ構成

my-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ui/              # 基本UIコンポーネント
│   │   │   ├── Button.ts
│   │   │   └── Input.ts
│   │   └── layout/           # レイアウトコンポーネント
│   │       ├── Header.ts
│   │       └── Footer.ts
│   ├── styles/
│   │   ├── main.css         # メインエントリ（Tailwindをインポート）
│   │   ├── components.css   # コンポーネント関連のスタイル
│   │   └── utilities.css    # カスタムユーティリティクラス
│   ├── utils/
│   │   └── helpers.ts
│   ├── pages/               # ページファイル（複数ページアプリの場合）
│   ├── assets/              # 静的アセット
│   │   ├── images/
│   │   └── fonts/
│   ├── main.ts
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

3.2 なぜこのように分けるのか？

components/ui/ には基本コンポーネントを配置します。ボタン、入力フィールド、モーダルなど。これらは再利用性が高く、ビジネスロジックに依存しません。

components/layout/ にはレイアウトコンポーネントを配置します。Header、Footer、Sidebar など。これらはページの骨格を担当し、ui コンポーネントとは役割が異なります。

styles/ には CSS をまとめます。Tailwind v4 になってから、設定がすべて CSS にあるため、一箇所にまとめて管理する方が便利になりました。

utils/ にはユーティリティ関数を配置します。日付のフォーマット、文字列の処理など、純粋な関数です。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

3.3 CSS ファイルの整理方法

/* src/styles/main.css — エントリファイル */

/* Tailwind をインポート */
@import "tailwindcss";

/* 他のスタイルファイルをインポート */
@import "./components.css";
@import "./utilities.css";

/* グローバル基本スタイル */
@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }

  /* リンクのデフォルトスタイル */
  a {
    @apply text-primary hover:underline;
  }
}

@layer base は Tailwind のレイヤー機能で、最も低い層のスタイルを定義します。直接 body { ... } と書くよりも、Tailwind が優先順位を適切に処理してくれる点が優れています。

4. v3 移行チェックリスト

手元に v3 プロジェクトがあり、アップグレードしたい場合は、このチェックリストに従ってください。最近いくつかのプロジェクトをアップグレードしましたが、ハマったポイントをすべて記載しています。

4.1 設定ファイルの移行

• tailwind.config.js を削除（Tailwind の設定のみの場合）
• postcss.config.js を削除（Tailwind 用途のみの場合）
• CSS ファイルに @import "tailwindcss" を1行追加
• vite.config.ts を更新し、@tailwindcss/vite プラグインに変更

4.2 依存関係の更新

# 古い依存関係をアンインストール
npm uninstall postcss autoprefixer tailwindcss

# 新しい依存関係をインストール
npm install tailwindcss @tailwindcss/vite

• アンインストールコマンドを実行
• インストールコマンドを実行
• package.json でバージョン番号を確認

4.3 スタイルの調整

• @tailwind base; @tailwind components; @tailwind utilities; を @import "tailwindcss"; に置き換え
• tailwind.config.js のテーマ設定を CSS の @theme ブロックに移行
• カスタムユーティリティクラスが正常に動作するか確認

テーマ設定の移行例：

/* v3 の tailwind.config.js */
module.exports = {
  theme: {
    colors: {
      primary: '#3b82f6',
    }
  }
}

/* v4 の main.css */
@theme {
  --color-primary: #3b82f6;
}

4.4 テストと検証

• npm run dev で開発環境が正常か確認
• npm run build で本番ビルドが成功するか確認
• ページを開いてスタイルが失われていないか確認
• CSS ファイルを変更して、ホットリロードが動作するか確認

5. よくある問題と解決策

アップグレードや設定中に最も多く遭遇した問題はこれらです。

5.1 スタイルが適用されない

class="bg-primary" と書いたのに、ページが真っ白。どういうこと？

調査手順：

1. ブラウザの開発者ツールを開いて、CSS ファイルが正しく読み込まれているか確認
2. main.ts で本当に CSS ファイルをインポートしているか確認
3. vite.config.ts でプラグインが正しく設定されているか確認

以前、main.ts で import './styles/main.css' を忘れていたことがありました。初歩的なミスですが、確かに見落としやすいです。

5.2 ホットリロードが動作しない

CSS を変更しても、ページが全く反応しない。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

調査手順：

1. Vite のバージョンが 5.0 以上か確認（古いバージョンには互換性の問題がある）
2. 開発サーバーを再起動してみる
3. ブラウザのキャッシュをクリアするか、シークレットウィンドウを開く

それでも動作しない場合は、コンソールでエラーが出ていないか確認してください。他のプラグインとの競合が原因の場合があります。

5.3 ビルド後の CSS サイズが大きすぎる

本番環境用にビルドしたら、CSS ファイルが数百 KB になる。

調査手順：

1. v4 の最新バージョンを使用しているか確認。古いバージョンはツリーシェイキングが十分ではありません
2. アイコンライブラリ全体や他の大きな依存関係をインポートしていないか確認
3. @layer でスタイルをレイヤー化する。Tailwind は優先順位と重複排除をより適切に処理します

正直なところ、ほとんどの場合、v4 の出力は十分にスリムです。それでも大きすぎる場合は、自分で CSS に多くを書きすぎている可能性が高いです。

まとめ

長々と説明しましたが、核となるのはこの4つだけです：

1. インストール：npm install tailwindcss @tailwindcss/vite
2. Vite の設定：tailwindcss() プラグインを追加
3. CSS を書く：@import "tailwindcss" + @theme でテーマ設定
4. 動かす：npm run dev

v4 と v3 の最大の違いは、設定を JS から CSS に移したことです。最初は少し戸惑うかもしれませんが、しばらく使ってみると、こちらの方が直感的だと感じるはずです。スタイルを書くついでに設定も変更できるので、ファイル間を行き来する必要がありません。

v3 から移行する場合は、tailwind.config.js のテーマ設定を CSS の @theme 構文に変換することを忘れないでください。時間はかかりますが、より速いビルド速度とシンプルなプロジェクト構成が得られるので、コストパフォーマンスは十分に高いです。

4 min read · 公開日: 2026年3月25日 · 更新日: 2026年3月25日

Easton

技術開発