Tailwind CSS v4 がリリースされてだいぶ経ちましたね。v3 から大幅に仕組みが変わっていて、「まだ v3 のまま」「設定方法がわからない」という人も多いんじゃないでしょうか。
今回は、Tailwind CSS v4 のセットアップ手順を Vite と合わせて完全解説します。CSSファースト設定や高速な Oxide エンジンなど、v4 の注目ポイントも押さえていきますよ。
結論：v4 はここが変わった
まず、v4 の主要な変更点をざっくりまとめますね。
- CSSファースト設定：
tailwind.config.jsはもう不要。CSS に直接@themeで書く - Rust 製 Oxide エンジン：ビルドが超高速。公式ベンチで v3 比最大 182 倍との報告も
- 自動ツリーシェイク：使ってないユーティリティは自動で除外。Purge 設定不要
@import "tailwindcss"一本化：@tailwind base/components/utilitiesは廃止- OKLCH 色空間：デフォルトのカラー値が OKLCH に。人間の知覚に合った色設計
「え、config.js いらないの？」って思うかもしれませんが、本当に要らないんです。CSS だけで完結するようになりました。
Vite プロジェクトに Tailwind CSS v4 をセットアップする
では実際に手を動かしてセットアップしていきましょう。
1. プロジェクトを作成
まずは Vite プロジェクトを作ります。お好みのテンプレートで OK です。
npm create vite@latest my-app -- --template vanilla
cd my-appReact や Vue を使うなら --template react-ts でも大丈夫です。
2. パッケージをインストール
Tailwind CSS v4 と Vite プラグインをインストールします。
npm install --save-dev tailwindcss @tailwindcss/viteこれだけで OK。tailwindcss 本体と、Vite 用プラグインが入ります。余計な設定ファイルは一切不要です。
3. Vite 設定にプラグインを追加
vite.config.js を開いて、Tailwind プラグインを追加します。
import { defineConfig } from "vite"
import tailwindcss from "@tailwindcss/vite"
export default defineConfig({
plugins: [tailwindcss()],
})これだけ。v3 のように PostCSS 経由じゃなくて、Vite プラグインとして直接動くんです。
4. CSS にエントリポイントを追加
メインの CSS ファイル（src/style.css）の先頭にこれを書きます。
@import "tailwindcss";@tailwind base や @tailwind utilities はもう書きません。これ一本で全部読み込まれます。
5. HTML で Tailwind クラスを使う
あとは普通にクラスを書くだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded-2xl shadow-lg">
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind v4!</h1>
</div>
</body>
</html>6. ビルドして確認
npx vite buildこれで dist/ 以下にビルド成果物が出力されます。たったこれだけで Tailwind が使えるようになりました。
カスタムデザイントークンを定義する（@theme）
ここが v4 の一番大きな変更点ですね。
v3 までは tailwind.config.js の theme.extend で色やフォントを定義していましたが、v4 では CSS に @theme ディレクティブを書きます。
@import "tailwindcss";
@theme {
--color-brand: oklch(0.62 0.21 259.82);
--color-brand-dark: oklch(0.49 0.24 264.38);
--font-heading: "Inter", sans-serif;
}これだけで text-brand、bg-brand-dark、font-heading といったクラスが使えるようになります。
ポイントは変数名のルールですね：
- 色：
--color-*→text-*/bg-*/border-*など - フォント：
--font-*→font-* - スペーシング：
--spacing-*→p-*/m-*など - 角丸：
--radius-*→rounded-* - 影：
--shadow-*→shadow-* - ブレークポイント：
--breakpoint-*→sm:*/md:*など
慣れるとむしろ直感的ですね。CSS 変数としてもそのまま使えるので、var(--color-brand) みたいな参照ももちろん可能です。
v3 からの移行ポイント
既存の v3 プロジェクトを v4 に上げる場合、注意する点をまとめます。
公式 Codemod を使う
いきなり手作業で書き換えるのは大変なので、公式のアップグレードツールを使いましょう。
npx @tailwindcss/upgradeこれを実行すると、tailwind.config.js の内容を @theme に変換したり、@tailwind ディレクティブを @import に置き換えたりしてくれます。ただし、完璧ではないので出力は必ず確認してくださいね。
自分で確認するポイント
@tailwind base/components/utilitiesを削除：@import "tailwindcss"に一本化tailwind.config.jsを削除：設定は CSS の@themeに移行postcss.config.jsを見直し：Vite を使うなら@tailwindcss/viteプラグインに切り替えdarkMode設定は不要に：v4 はデフォルトでmediaベースのダークモード。セレクタ方式にしたいなら@custom-variant dark (&:where(.dark, .dark *));を CSS に書く- プラグインの対応状況を確認：v3 用のプラグイン（
@tailwindcss/formsなど）は v4 に対応したものを入れ直す
Vite 以外のセットアップ方法
今回は Vite を推奨しましたが、他にも方法はあります。
PostCSS（Next.js など）
npm install --save-dev tailwindcss @tailwindcss/postcsspostcss.config.js にこう書きます。
export default {
plugins: {
"@tailwindcss/postcss": {},
},
}CLI（ビルドツール非依存）
npm install --save-dev tailwindcss @tailwindcss/cli
npx tailwindcss -i src/style.css -o dist/style.css --watchシンプルな静的サイトならこれで十分です。
よくあるトラブルと対処法
クラスが効かない
CSS ファイルに @import "tailwindcss"; が正しく書かれているか確認しましょう。@tailwind base のまま古い記法になってると動きません。
Vite の HMR が反応しない
Vite 5 以上推奨です。それより古いバージョンだと HMR に互換性の問題がある場合があります。npm update vite でアップデートしてみてください。
ビルドに時間がかかる
v4 の Oxide エンジンはむしろ高速なはずなんですが、もし遅いと感じたら node_modules を再インストールしてみてください。rm -rf node_modules && npm install で大抵直ります。
カスタムクラスが出力されない
v4 は自動ツリーシェイクが効くので、HTML で使われていないクラスは CSS に出力されません。@theme で定義した色も、実際にクラスとして使わない限り出力に含まれないので注意してください。
【広告】このサイトはConoHa WINGで運営しています。高速で安定した運営ができています。。いつもありがとう！！
【広告】独自ドメインを取得してWebサービスを公開するならお名前.comがおすすめです。格安で .com ドメインが取得できます。
まとめ
Tailwind CSS v4 は、セットアップが格段にシンプルになりました。特に CSS ファースト設定への移行は「設定ファイルを探し回る」ストレスから解放してくれますね。
- インストールは
npm install tailwindcss @tailwindcss/viteだけ - 設定は CSS の
@themeに集約 - ビルドは Oxide エンジンで爆速
- 不要なクラスは自動で除外
まだ v3 のままの人は、この機会にぜひ v4 に移行してみてください。体感できるレベルの高速さと、設定のシンプルさを実感できると思いますよ。
コメント