Tailwind CSS v4で何が変わった？v3→v4の変更点をまとめて解説

Tailwind CSS は「ユーティリティファースト CSS フレームワーク」です。flex ・text-center ・bg-blue-500 のような小さなクラスを HTML に直接書いていくスタイルで、コンポーネントに対して名前を付けてスタイルを定義する従来のアプローチとは一線を画しています。

<!-- 従来のCSS：.card というクラスを定義してスタイルをまとめる -->
<div class="card">こんにちは</div>

<!-- Tailwind：クラスを組み合わせてスタイルを表現する -->
<div class="rounded-lg border border-gray-200 p-6 shadow-sm">こんにちは</div>

メリットは「CSSファイルとHTMLを行き来しなくていい」「使われていないCSSが自動で削除される（ツリーシェイク）」など。v3まで多くのプロジェクトで採用されており、npmの週間ダウンロード数は1,000万回を超えています。

v4 は「小さな改善の積み重ね」ではありません。開発チームが掲げた目標は大きく3つありました。

まず全体像をテーブルで確認してから、各変更点を順番に掘り下げます。

v3 での最初のつまずきポイントといえば設定ファイルのセットアップでした。v4 ではtailwind.config.js は完全に廃止されています。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",  // スキャン対象を手動で指定
  ],
  theme: {
    extend: {
      colors: {
        brand: "#0ea5e9",
      },
    },
  },
  plugins: [],
};

@import "tailwindcss";


/* テーマのカスタマイズもCSSで書く（後述）*/
@theme {
  --color-brand: #0ea5e9;
}

v3 では「どのファイルを見てクラスを収集するか」をcontent 配列に手動で書く必要がありました。これを書き忘れると、本番ビルドで使用しているクラスが削除されてスタイルが消える、という事故が頻繁に起きていました。

// v3 : スキャン対象を手動で列挙する必要があった

content: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
"./src/app/**/*.{js,ts,jsx,tsx}",
],

// v4 : 設定不要 — プロジェクト内を自動でスキャン

/* content 配列の設定は不要 */
/* Tailwind が .gitignore を参照しながら自動でスキャンする */

v4 は.gitignore の内容を参考にnode_modules などを除外しつつ、プロジェクト全体を自動でスキャンします。

v4 で最も大きなアーキテクチャの変更が「CSS-First 設計」です。v3 では JavaScript で設定していたテーマのカスタマイズが、v4 では CSS の@theme ブロックに移りました。

theme: {
  extend: {
    colors: {
      brand: {
        50:  "#e0f2fe",
        500: "#0ea5e9",
        900: "#0c4a6e",
      },
    },
    fontFamily: {
      sans: ["Noto Sans JP", "sans-serif"],
    },
    spacing: {
      18: "4.5rem",
    },
  },
},

@import "tailwindcss";

@theme {
  /* カラー */
  --color-brand-50:  #e0f2fe;
  --color-brand-500: #0ea5e9;
  --color-brand-900: #0c4a6e;

  /* フォント */
  --font-sans: "Noto Sans JP", sans-serif;

  /* スペーシング */
  --spacing-18: 4.5rem;
}

CSS 変数の命名規則（--color-* ・--font-* ・--spacing-* ）に従って書けば、自動的にbg-brand-500 ・font-sans ・p-18 などのユーティリティクラスが生成されます。

v3 では PostCSS を経由してビルドするのが標準的なセットアップでした。postcss.config.js にtailwindcss とautoprefixer を並べる、あの設定です。

// v3 : postcss.config.js — 毎回書いていたボイラープレート
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

v4 では Vite・Next.js など主要なバンドラー向けの ファーストクラスプラグイン が提供されており、PostCSS を介さずに直接動作します。

// v4 + VITE : vite.config.ts — プラグインを追加するだけ

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";


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

  ],
});

v4 の内部エンジン「Oxide」は Rust で書き直されています。JavaScript ベースだった v3 と比べてビルドパフォーマンスが大幅に向上しました。

開発中のホットリロード（HMR）が劇的に速くなっているため、 「クラスを追加してブラウザに反映されるまでのラグ」がほぼゼロになります。 大規模プロジェクトほど恩恵を感じられます。

v4 は CSS カスタムプロパティ・カスケードレイヤー（@layer ）・color-mix() など、モダンブラウザの新機能をフル活用しています。そのため、 IE11 や古い Safari はサポート外 となりました。

業務システムなどで古いブラウザのサポートが必要な場合は、v3 を使い続けることが現実的な選択肢です。一方、モダンな Web アプリ・個人プロジェクトであれば v4 への移行を積極的に検討してください。

既存プロジェクトを v3 から v4 に移行する場合の大まかな手順は以下の通りです。第2回以降で実際にハンズオンしていきますが、ここでは全体の流れだけ把握しておきましょう。