2026年版 Tailwind CSS v4：実践的な例を含む完全ガイド

Tailwind CSS v4は、フレームワーク誕生以来最大の刷新を象徴しています。2025年初頭にリリースされ、2026年には完全に成熟したv4は、CSSファースト設定システム、Oxideと呼ばれる完全に書き直されたエンジン、劇的なパフォーマンス向上、そしてモダナイズされたユーティリティセットを導入しています。Tailwind v3を使用してきた方にとって、v4へのアップグレードは設定とテーマに対する考え方を変えるものです。このガイドでは、知っておくべきすべてのことを解説します。

Tailwind CSS v4の変更点

Tailwind v4は単なるインクリメンタルアップデートではありません。フレームワークが内部でどのように動作するかの根本的な再考です。主な変更点は以下の通りです：

• CSSファースト設定：tailwind.config.jsは不要になりました。テーマ値、カスタムユーティリティ、バリアントはすべて@themeなどのディレクティブを使用してCSSで直接定義されます。
• Oxideエンジン：Rustで書かれた新しい高性能エンジンで、パース、コンパイル、クラス検出をv3より桁違いに高速に処理します。
• モダンCSS機能：@layer、カスケードレイヤー、color-mix()、oklch()、コンテナクエリ、アニメーション用の@starting-styleのビルトインサポート。
• 簡素化されたインストール：ゼロ設定で開始するために必要なパッケージは1つだけです。
• 新しいデフォルトテーマ：OKLCHを使用した拡張カラーパレット、更新されたスペーシングスケール、改善されたタイポグラフィデフォルト。

Tailwind CSS v4を始める

インストール

Tailwind v4のセットアップはこれまで以上にシンプルです。個別のPostCSSプラグインや設定ファイルは必要ありません。

# Install Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite

# Or with the CLI
npm install tailwindcss @tailwindcss/cli

Viteベースのプロジェクトの場合、Vite設定にプラグインを追加します：

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

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

次に、メインCSSファイルでTailwindをインポートします：

/* app.css */
@import "tailwindcss";

これがセットアップのすべてです。tailwind.config.jsも、postcss.config.jsも、コンテンツパスの設定も必要ありません。Oxideエンジンが自動的にソースファイルを検出し、クラス名をスキャンします。

CLIの使用

Viteを使用していない場合でも、CLIは同様に機能します：

npx @tailwindcss/cli -i app.css -o output.css --watch

@themeによるCSSファースト設定

v4での最大の概念的変化は、すべてのカスタマイズがJavaScriptではなくCSSで行われることです。@themeディレクティブが以前のtailwind.config.jsのテーマオブジェクトを置き換えます。

カスタムカラーの定義

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --color-brand-light: #818cf8;
  --color-brand-dark: #3730a3;
  --color-surface: #f8fafc;
  --color-surface-dark: #1e293b;
}

これらのCSS変数は自動的にTailwindユーティリティとして利用可能になります：

<div class="bg-brand text-white">
  <h1 class="text-brand-light">Hello, Tailwind v4</h1>
</div>

カスタムスペーシングとサイジング

@theme {
  --spacing-18: 4.5rem;
  --spacing-128: 32rem;
  --width-content: 72rem;
  --width-sidebar: 20rem;
}

カスタムフォント

@theme {
  --font-sans: "Inter", "system-ui", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-display: "Cal Sans", "Inter", sans-serif;
}

デフォルトテーマのオーバーライドと拡張

デフォルトでは、@themeはビルトインテーマを拡張します。ネームスペースを完全に置き換えたい場合は、--*ワイルドカードリセットを使用します：

@theme {
  /* Remove all default colors, only use these */
  --color-*: initial;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;
}

Oxideエンジン

内部では、Tailwind v4はRustで書かれネイティブコードにコンパイルされたOxideという新しいエンジンを使用しています。パフォーマンスの差は大きいです。

パフォーマンスの向上

Oxideエンジンは、v3のJavaScriptベースのエンジンと比較して劇的な速度向上を実現します：

• 初期ビルド時間は、プロジェクトのサイズに応じて通常3〜10倍高速です。
• インクリメンタルリビルドは開発中ほぼ瞬時で、多くの場合5ミリ秒未満です。
• メモリ使用量は、Rustがガベージコレクターなしでメモリを管理するため、大幅に低くなっています。

数十万のクラスを持つ大規模なモノレポプロジェクトでは、違いが特に顕著です。v3がフルリビルドに数秒かかる場合でも、v4は数百ミリ秒で完了します。

自動コンテンツ検出

最も優れたQOL改善の一つは、コンテンツパスを指定する必要がなくなったことです。Oxideエンジンが自動的にプロジェクトファイルを検出してスキャンします。ヒューリスティクスを使用してテンプレートファイル、JSX/TSXコンポーネント、その他のクラス名のソースを見つけます。

ファイルを明示的にインクルードまたはエクスクルードする必要がある場合は、@sourceディレクティブを使用できます：

@import "tailwindcss";

/* Add additional source paths */
@source "../shared-components/**/*.tsx";

/* Exclude a path */
@source not "../node_modules";

新しいユーティリティクラスと更新

Tailwind v4はいくつかの新しいユーティリティを導入し、モダンCSS機能を活用するように既存のものを改善しています。

コンテナクエリ

コンテナクエリを使用すると、ビューポートではなく親コンテナのサイズに基づいて要素をスタイリングできます。Tailwind v4はファーストクラスのサポートを提供しています。

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4 bg-white rounded-lg">Card 1</div>
    <div class="p-4 bg-white rounded-lg">Card 2</div>
    <div class="p-4 bg-white rounded-lg">Card 3</div>
  </div>
</div>

@containerクラスがコンテインメントコンテキストを確立し、@md:、@lg:プレフィックスがコンテナの幅に基づいてスタイルを適用します。

モダンカラー関数

Tailwind v4はデフォルトで知覚的に均一なカラースペースを提供するOKLCHカラーを使用します。動的なカラー操作にはcolor-mix()も使用できます：

@theme {
  --color-primary: oklch(0.6 0.25 265);
  --color-primary-hover: oklch(0.5 0.25 265);
}

<button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded">
  Click me
</button>

3Dトランスフォーム

<div class="perspective-500">
  <div class="rotate-y-12 hover:rotate-y-0 transition-transform duration-300">
    <img src="/card.jpg" alt="3D card" class="rounded-xl shadow-lg" />
  </div>
</div>

新しいグラデーションユーティリティ

v4は追加機能でグラデーションサポートを拡張しています：

<!-- Gradient with interpolation in OKLCH for smoother transitions -->
<div class="bg-linear-to-r from-blue-500 to-purple-500 bg-interpolate-oklch">
  Smooth gradient
</div>

<!-- Conic gradient -->
<div class="bg-conic from-red-500 via-yellow-500 to-green-500">
  Color wheel
</div>

not-バリアント

not-バリアントはCSS :not()を活用して他のバリアントを反転させます：

<div class="opacity-50 not-hover:opacity-100">
  Fades on hover instead of appearing
</div>

<input class="border-gray-300 not-focus:border-transparent" />

アニメーションのためのStarting Style

startingバリアントを使用すると、DOMに表示される要素のエントリーアニメーションを可能にする@starting-styleルールのスタイルを定義できます：

<dialog class="opacity-0 starting:opacity-0 open:opacity-100 transition-opacity">
  <p>This dialog fades in when opened</p>
</dialog>

v4でのレスポンシブデザイン

レスポンシブデザインは概念的には同じように機能し、おなじみのブレイクポイントプレフィックス構文を使用します。ただし、v4は内部的にモダンCSS機能を使用しています。

デフォルトのブレイクポイント

デフォルトのブレイクポイントは実用的です：

プレフィックス	最小幅	一般的な用途
sm	640px	大型スマートフォン、横向き
md	768px	タブレット
lg	1024px	小型ラップトップ
xl	1280px	デスクトップ
2xl	1536px	大画面

カスタムブレイクポイント

@theme {
  --breakpoint-xs: 475px;
  --breakpoint-3xl: 1920px;
}

<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4">
  <!-- Responsive grid -->
</div>

レスポンシブレイアウトの例

<header class="flex flex-col sm:flex-row items-center justify-between p-4 lg:px-8">
  <a href="/" class="text-xl font-bold">Brand</a>
  <nav class="hidden md:flex gap-6 text-sm font-medium">
    <a href="/features" class="hover:text-brand">Features</a>
    <a href="/pricing" class="hover:text-brand">Pricing</a>
    <a href="/docs" class="hover:text-brand">Docs</a>
  </nav>
  <button class="md:hidden p-2" aria-label="Menu">
    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</header>

ダークモード

Tailwind v4はdark:バリアントでダークモードを引き続きサポートしています。デフォルトではprefers-color-schemeメディアクエリを使用しますが、クラスベースまたはセレクターベースの切り替えに変更できます。

基本的なダークモード

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-2xl font-bold">Welcome</h1>
  <p class="text-gray-600 dark:text-gray-400">This adapts to your system theme.</p>
</div>

クラスベースのダークモード

システム設定に依存せずJavaScriptでダークモードを切り替えるには：

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

これで、親要素にdarkクラスがあるとダークモードがアクティブになります：

<html class="dark">
  <body class="bg-white dark:bg-gray-950">
    <!-- Dark mode active -->
  </body>
</html>

// Toggle dark mode with JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

テーマ対応コンポーネントの構築

<div class="rounded-xl border border-gray-200 dark:border-gray-800
            bg-white dark:bg-gray-900
            shadow-sm dark:shadow-gray-950/50
            p-6">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
    Settings
  </h3>
  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
    Manage your account preferences.
  </p>
  <button class="mt-4 px-4 py-2 rounded-lg
                 bg-brand text-white
                 hover:bg-brand-dark
                 focus:outline-none focus:ring-2 focus:ring-brand/50">
    Save Changes
  </button>
</div>

アニメーションユーティリティ

Tailwind v4はアニメーションサポートを大幅に拡張し、カスタムCSSなしで洗練されたインタラクションをより簡単に作成できるようにしています。

トランジションユーティリティ

<!-- Smooth hover effect -->
<button class="bg-blue-600 hover:bg-blue-700
               transform hover:scale-105
               transition-all duration-200 ease-out
               text-white px-6 py-3 rounded-lg">
  Hover me
</button>

<!-- Transition specific properties -->
<div class="transition-colors duration-300 bg-gray-100 hover:bg-blue-100">
  Color transition only
</div>

ビルトインアニメーション

<!-- Spin animation for loading indicators -->
<svg class="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24">
  <!-- spinner SVG -->
</svg>

<!-- Pulse animation -->
<div class="animate-pulse bg-gray-200 rounded h-4 w-3/4"></div>

<!-- Bounce -->
<div class="animate-bounce">Scroll down</div>

@themeによるカスタムアニメーション

@theme {
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-fade-up: fade-up 0.5s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="animate-slide-in">Slides in from the left</div>
<div class="animate-fade-up">Fades up into view</div>

Tailwind v3からv4へのマイグレーション

v3からv4へのマイグレーションにはある程度の労力が必要ですが、Tailwindチームがほとんどの変更を自動的に処理するコードモッドツールを提供しています。

アップグレードツールの実行

npx @tailwindcss/upgrade

このツールはプロジェクトをスキャンし、ほとんどのv3パターンをv4の等価物に自動変換します。ユーティリティの名前変更、設定のマイグレーション、インポートの更新を処理します。

主なマイグレーション変更点

v3	v4	備考
tailwind.config.js	CSSの@theme	設定がCSSに移動
@tailwind base/components/utilities	@import "tailwindcss"	単一インポート
bg-opacity-50	bg-black/50	不透明度モディファイア構文
text-opacity-75	text-white/75	不透明度モディファイア構文
decoration-clone	box-decoration-clone	名前変更
flex-shrink-0	shrink-0	簡素化（v3でも動作）
flex-grow	grow	簡素化
overflow-clip	overflow-clip	同じ
設定のcontentパス	自動検出	設定不要
設定のdarkMode: 'class'	CSSの@variant dark (...)	CSSベース

手動での対応

アップグレードツール実行後、以下の領域を手動で確認してください：

1. カスタムプラグイン：v3のJavaScriptプラグインは@utilityと@variantディレクティブを使用してCSSで書き直す必要があります。
2. カスタムテーマ値：tailwind.config.jsからCSSの@themeブロックに移動してください。
3. サードパーティプラグイン：v4互換性のために更新されているか確認してください。

v3プラグインのv4への変換

v3プラグイン（JavaScript）：

// v3: tailwind.config.js plugin
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-balance': {
          'text-wrap': 'balance',
        },
      });
    }),
  ],
};

v4の等価物（CSS）：

/* v4: defined directly in CSS */
@utility text-balance {
  text-wrap: balance;
}

v3カスタムバリアントの変換

v3（JavaScript）：

// v3
plugin(function({ addVariant }) {
  addVariant('hocus', ['&:hover', '&:focus']);
});

v4（CSS）：

/* v4 */
@variant hocus (&:hover, &:focus);

完全なコンポーネントの構築

すべてをまとめて、v4の機能を示す料金カードコンポーネントを構築してみましょう：

<div class="@container max-w-sm mx-auto">
  <div class="rounded-2xl border border-gray-200 dark:border-gray-800
              bg-white dark:bg-gray-900
              shadow-xl shadow-gray-900/5 dark:shadow-gray-950/50
              p-8
              transition-all duration-300
              hover:shadow-2xl hover:-translate-y-1">

    <h3 class="text-sm font-semibold text-brand uppercase tracking-wider">
      Pro Plan
    </h3>

    <div class="mt-4 flex items-baseline gap-1">
      <span class="text-5xl font-bold text-gray-900 dark:text-white">$29</span>
      <span class="text-gray-500 dark:text-gray-400">/month</span>
    </div>

    <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
      Everything you need to build and ship faster.
    </p>

    <ul class="mt-8 space-y-3 text-sm">
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Unlimited projects
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Priority support
      </li>
      <li class="flex items-center gap-3 text-gray-700 dark:text-gray-300">
        <svg class="w-5 h-5 text-brand shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
        Advanced analytics
      </li>
    </ul>

    <button class="mt-8 w-full rounded-lg bg-brand py-3 text-sm font-semibold text-white
                   hover:bg-brand-dark
                   focus:outline-none focus:ring-2 focus:ring-brand/50 focus:ring-offset-2
                   dark:focus:ring-offset-gray-900
                   transition-colors duration-200">
      Get started
    </button>
  </div>
</div>

まとめ

Tailwind CSS v4はフレームワークにとって大きな前進です。CSSファースト設定への移行により、プロジェクトのセットアップと理解がよりシンプルになります。Oxideエンジンはビルドパフォーマンスの問題を解消します。そして、コンテナクエリやOKLCHカラーなどのモダンCSS機能に基づく新しいユーティリティは、カスタムCSSを少なく書きながらもより強力なツールを提供します。

新しいプロジェクトを始めるなら、v4を使用しない理由はありません。v3プロジェクトを保守している場合は、アップグレードツールがほとんどのコードベースでマイグレーションを簡単にしてくれます。コミュニティとエコシステムはv4を完全に受け入れており、開発者体験はかつてないほど向上しています。

CSS to Tailwindコンバーターを使って、既存のCSSをすばやく変換してみてください。

新しい機能、特にコンテナクエリと@themeディレクティブを試してみてください。これらはコンポーネントデザインへのアプローチを根本的に変え、一度採用すると、戻ることがダウングレードのように感じられるでしょう。