Tailwind v4 + Vite：5分で完了する完全設定テンプレート
はじめに
昨年、新しいプロジェクトで Tailwind を設定していた時のことです。tailwind.config.js の content パスを修正していて、30分も格闘していました。「もっと簡単にならないかな」と思ったのを覚えています。
今年、Tailwind v4 が登場し、本当にそれを実現しました。
今では、たった3行のコードで完全な Tailwind プロジェクトが動きます。PostCSS の設定も tailwind.config.js も不要。どのファイルをスキャンするか手動で指定する必要すらありません。初めてこの変化を見た時、正直、信じられませんでした。
この記事は、その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：一目瞭然な比較
まず、この表を見てください：
| 比較項目 | Tailwind v3 | Tailwind v4 |
|---|---|---|
| インストール方法 | npm install -D tailwindcss postcss autoprefixer | npm install tailwindcss @tailwindcss/vite |
| 設定ファイル | tailwind.config.js が必要 | 不要、CSS で直接設定 |
| Vite 統合 | PostCSS プラグイン経由 | 公式 Vite プラグイン |
| コンテンツスキャン | 手動設定 content: ['./src/**/*.{html,js}'] | 自動スキャン、設定不要 |
| テーマ設定 | JS 設定オブジェクト：theme: { colors: {...} } | CSS カスタムプロパティ：@theme { --color-*: ... } |
おわかりでしょうか？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.ts3.2 なぜこのように分けるのか？
components/ui/ には基本コンポーネントを配置します。ボタン、入力フィールド、モーダルなど。これらは再利用性が高く、ビジネスロジックに依存しません。
components/layout/ にはレイアウトコンポーネントを配置します。Header、Footer、Sidebar など。これらはページの骨格を担当し、ui コンポーネントとは役割が異なります。
styles/ には CSS をまとめます。Tailwind v4 になってから、設定がすべて CSS にあるため、一箇所にまとめて管理する方が便利になりました。
utils/ にはユーティリティ関数を配置します。日付のフォーマット、文字列の処理など、純粋な関数です。
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" と書いたのに、ページが真っ白。どういうこと？
調査手順：
- ブラウザの開発者ツールを開いて、CSS ファイルが正しく読み込まれているか確認
main.tsで本当に CSS ファイルをインポートしているか確認vite.config.tsでプラグインが正しく設定されているか確認
以前、main.ts で import './styles/main.css' を忘れていたことがありました。初歩的なミスですが、確かに見落としやすいです。
5.2 ホットリロードが動作しない
CSS を変更しても、ページが全く反応しない。
調査手順：
- Vite のバージョンが 5.0 以上か確認（古いバージョンには互換性の問題がある）
- 開発サーバーを再起動してみる
- ブラウザのキャッシュをクリアするか、シークレットウィンドウを開く
それでも動作しない場合は、コンソールでエラーが出ていないか確認してください。他のプラグインとの競合が原因の場合があります。
5.3 ビルド後の CSS サイズが大きすぎる
本番環境用にビルドしたら、CSS ファイルが数百 KB になる。
調査手順：
- v4 の最新バージョンを使用しているか確認。古いバージョンはツリーシェイキングが十分ではありません
- アイコンライブラリ全体や他の大きな依存関係をインポートしていないか確認
@layerでスタイルをレイヤー化する。Tailwind は優先順位と重複排除をより適切に処理します
正直なところ、ほとんどの場合、v4 の出力は十分にスリムです。それでも大きすぎる場合は、自分で CSS に多くを書きすぎている可能性が高いです。
まとめ
長々と説明しましたが、核となるのはこの4つだけです：
- インストール：
npm install tailwindcss @tailwindcss/vite - Vite の設定：
tailwindcss()プラグインを追加 - CSS を書く：
@import "tailwindcss"+@themeでテーマ設定 - 動かす：
npm run dev
v4 と v3 の最大の違いは、設定を JS から CSS に移したことです。最初は少し戸惑うかもしれませんが、しばらく使ってみると、こちらの方が直感的だと感じるはずです。スタイルを書くついでに設定も変更できるので、ファイル間を行き来する必要がありません。
v3 から移行する場合は、tailwind.config.js のテーマ設定を CSS の @theme 構文に変換することを忘れないでください。時間はかかりますが、より速いビルド速度とシンプルなプロジェクト構成が得られるので、コストパフォーマンスは十分に高いです。
Tailwind v4 + Vite プロジェクトの設定
5分で Tailwind CSS v4 と Vite の統合設定を完了
⏱️ 目安時間: 5 分
- 1
ステップ1: プロジェクトを作成して依存関係をインストール
以下のコマンドを実行：
```bash
npm create vite@latest my-project -- --template vanilla-ts
cd my-project
npm install
npm install tailwindcss @tailwindcss/vite
```
postcss と autoprefixer をインストールする必要はありません。v4 には組み込まれています。 - 2
ステップ2: Vite プラグインを設定
`vite.config.ts` を修正：
```typescript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
```
たった3行のコードで、他の設定ファイルは不要です。 - 3
ステップ3: CSS エントリファイルを作成
`src/styles/main.css` を作成：
```css
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
}
```
`@theme` ブロックはカスタムテーマ用で、CSS 変数構文を使用します。 - 4
ステップ4: CSS をインポートして検証
`src/main.ts` の先頭に追加：
```typescript
import './styles/main.css'
```
`npm run dev` を実行し、ページで Tailwind クラス名を使用して動作を確認。 - 5
ステップ5: v3 からの移行（オプション）
v3 からの移行には：
• `tailwind.config.js` と `postcss.config.js` を削除
• `@tailwind` ディレクティブを `@import "tailwindcss"` に置き換え
• JS テーマ設定を `@theme` CSS ブロックに移行
• 依存関係を更新：古いパッケージをアンインストールし、v4 バージョンをインストール
FAQ
Tailwind v4 と v3 の主な違いは何ですか？
v4 で PostCSS は必要ですか？
v3 のテーマ設定をどのように移行しますか？
```css
@theme {
--color-primary: #3b82f6;
--color-secondary: #10b981;
}
```
色、フォント、スペーシングなどの設定はすべてこの構文をサポートしています。
スタイルが適用されない場合、どう確認しますか？
v4 はどの Vite バージョンをサポートしていますか？
4 min read · 公開日: 2026年3月25日 · 更新日: 2026年3月25日
関連記事
Tailwind CSS v4 新機能解説：パフォーマンス、設定、移行ガイド
Tailwind CSS v4 新機能解説：パフォーマンス、設定、移行ガイド
VPS選び完全ガイド：スペック・回線・管理パネルの選び方
VPS選び完全ガイド：スペック・回線・管理パネルの選び方
AI コード生成のミスを減らす？この5つの Prompt テクニックで効率50%アップ
コメント
GitHubアカウントでログインしてコメントできます