Tailwind CSS v4で変わったこと全部まとめ

はじめに

2025年1月にリリースされた Tailwind CSS v4.0 は、フレームワークの ゼロからの完全リライト です。設定ファイルはCSSに統合され、エンジンはRust製のLightning CSSに置き換わり、ビルド速度はフルビルドで3.5倍以上、インクリメンタルビルドで最大100倍以上高速になりました。

「v3からv4って何が変わったの？」「移行って大変？」という疑問を、この記事で全部解消します。

---

一番大きな変更：設定がJavaScriptからCSSへ

v3まで、Tailwindのカスタマイズは tailwind.config.js で行っていました。

// v3: tailwind.config.js（もう使わない）
module.exports = {
  content: ['./src/**/*.{html,js,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
        accent: '#f59e0b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ],
}

v4では、これが CSS ファイルの中 に移ります。

/* v4: app.css（設定もCSSに統合） */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --color-accent: #f59e0b;
  --font-sans: "Inter", sans-serif;
}

たったこれだけ です。tailwind.config.js も content の設定も不要。v4はテンプレートファイルを自動検出し、CSSカスタム変数でデザイントークンを定義します。

---

なぜCSSに移行したのか

「JavaScriptの方が便利じゃない？」と思うかもしれません。CSS-firstに移行した理由は3つあります。

1. デザイントークンがCSS変数になる

v4で @theme に定義したすべての値は、CSSカスタムプロパティ（CSS変数） として出力されます。

@theme {
  --color-brand: #3b82f6;
}

これは var(--color-brand) としてCSS内のどこからでも参照できます。JavaScript設定ファイルに閉じ込められていたデザイントークンが、CSSの標準機能として扱えるようになったわけです。

2. 設定ファイルが1つ減る

プロジェクトルートの設定ファイル（package.json、tsconfig.json、eslint.config.js...）が1つ減ること自体に価値があります。CSSの設定はCSSファイルに書く。シンプルです。

3. PostCSS依存が消せる

v4では @tailwindcss/vite や @tailwindcss/postcss といった専用プラグインが用意されており、Viteを使っている場合はPostCSS自体が不要になります。

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

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

---

ビルド速度：最大100倍高速

v4の内部エンジンは Lightning CSS（Rust製のCSSパーサー・トランスフォーマー）に置き換わりました。

項目	v3	v4	改善幅
フルビルド	基準	3.5倍以上高速	◎
インクリメンタルビルド	基準	8倍以上高速	◎
新しいCSSが不要な場合	基準	100倍以上高速（マイクロ秒単位）	◎◎◎

「保存した瞬間にスタイルが反映される」体験が、v4では本当に実現します。開発中のホットリロードが劇的に速くなるのは、日常の開発体験として非常に大きい変化です。

また、Lightning CSSがベンダープレフィックスの付与とモダンCSS構文の変換も担当するため、Autoprefixer が不要になりました。

---

v4で追加された注目機能

コンテナクエリ（プラグイン不要）

v3では @tailwindcss/container-queries プラグインが必要でしたが、v4ではプラグインなしで使えます。

<!-- 親要素のサイズに応じてレイアウトを変える -->
<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
    <!-- 親の幅が sm 以上で2列、lg 以上で4列 -->
  </div>
</div>

レスポンシブデザインの sm: md: がビューポート幅に基づくのに対し、@sm: @lg: は 親コンテナの幅 に基づきます。コンポーネント単位のレスポンシブ対応がCSS だけで完結します。

3Dトランスフォーム

<!-- カードのフリップアニメーション -->
<div class="perspective-800">
  <div class="rotate-y-0 hover:rotate-y-180 transition-transform duration-500">
    <!-- 裏表のあるカード -->
  </div>
</div>

rotate-x-*、rotate-y-*、translate-z-*、scale-z-*、perspective-* などの3Dトランスフォームユーティリティが標準搭載されました。v3ではカスタムCSSが必要だった3D表現が、クラス指定だけで実現できます。

@starting-style（JSなしのアニメーション）

<!-- 要素が表示されたときのフェードインアニメーション -->
<div class="opacity-100 transition-opacity starting:opacity-0">
  <!-- DOMに追加された瞬間、opacity: 0 → 1 にアニメーション -->
</div>

starting: バリアントは CSS の @starting-style を利用して、JavaScriptなしで要素の出現アニメーション を実現します。モーダルの表示、トースト通知の出現などに使えます。

not-* バリアント

<!-- ホバー「していない」ときだけ透明度を下げる -->
<div class="not-hover:opacity-50 transition-opacity">
  <!-- ホバーするとopacity: 1に -->
</div>

<!-- ダークモード「ではない」ときだけ適用 -->
<p class="not-dark:text-gray-800">ライトモード専用スタイル</p>

not-* で任意のバリアントを否定できます。条件の反転がクラス名だけで書けるようになりました。

---

v3からv4への移行方法

公式のアップグレードツールが用意されています。

# 自動アップグレード（ほとんどの変更を自動で処理）
npx @tailwindcss/upgrade

このコマンドは以下を自動で行います。

• tailwind.config.js の設定を @theme ディレクティブに変換
• @tailwind base / components / utilities を @import "tailwindcss" に変換
• 非推奨ユーティリティを新しい名前に置換
• PostCSS設定の更新

完全に自動で移行できるわけではない ので、いくつか手動対応が必要な点を挙げておきます。

手動対応が必要なケース

変更点	v3	v4	対応
PostCSSプラグイン	tailwindcss	@tailwindcss/postcss	パッケージ変更
色の透明度構文	bg-red-500/50	bg-red-500/50（変更なし）	不要
@apply	非推奨寄りだが動作	動作するが非推奨	ユーティリティクラスへの移行を検討
デフォルトのborder色	gray-200	currentColor	border-gray-200 の明示が必要
ring幅のデフォルト	ring = 3px	ring = 1px	ring-3 に変更
content paths	tailwind.config.js で指定	自動検出	.gitignore の設定に注意

特に デフォルトのborder色がcurrentColorに変わった のと、ringのデフォルト幅が3px→1pxに変わった のは、見た目の崩れにつながりやすいポイントです。

---

移行すべきか？ 新規プロジェクトではどうすべきか？

新規プロジェクト → v4一択

2026年3月時点で新規にTailwind CSSを導入するなら、v4を選ばない理由はありません。設定がシンプルで、ビルドが速く、コンテナクエリや3Dトランスフォームが標準で使えます。

既存プロジェクト → 公式ツールで移行可能

npx @tailwindcss/upgrade で大部分は自動移行できます。ただし、大規模プロジェクトでは手動調整が必要な箇所があるため、テスト環境で試してから本番に適用してください。

v3のまま運用 → 当面は問題なし

v3のサポートが即座に打ち切られるわけではありません。急いで移行する必要はありませんが、新機能の恩恵を受けられないため、タイミングを見て計画的に移行するのがおすすめです。

---

まとめ

変更点	v3	v4
設定方法	tailwind.config.js（JavaScript）	@theme ディレクティブ（CSS）
CSSエンジン	PostCSS	Lightning CSS（Rust製）
ビルド速度	基準	フル5倍・インクリメンタル100倍
コンテナクエリ	プラグイン必要	標準搭載
3Dトランスフォーム	カスタムCSS必要	標準搭載
@starting-style	非対応	starting: バリアント
not-* バリアント	非対応	not-* で条件反転
Autoprefixer	必要	不要（Lightning CSS内蔵）
content指定	手動設定	自動検出

Tailwind CSS v4は、「v3の改善版」ではなく 「Tailwindの再発明」 です。JavaScript設定からCSS-firstへの移行は最初こそ戸惑いますが、慣れてしまえば「なぜ今までJSに設定を書いていたんだろう」と感じるはずです。

特にビルド速度の改善は、一度体験すると v3 に戻れなくなります。まずは新規プロジェクトか個人開発でv4を試してみてください。

---

参考：

• Tailwind CSS v4.0 公式ブログ
• Tailwind CSS v4 アップグレードガイド
• Tailwind CSS v4 Deep Dive | DEV Community
• shadcn/ui + Tailwind v4 対応
• Tailwind CSS 4.0 Released | The New Stack