CSSフレームワークの定番として個人開発者・エンジニアに広く使われている Tailwind CSS が、2025年に v4 へとメジャーアップデートされました。設定方法が根本から変わり、ビルドが爆速になり、コンテナクエリなどモダンCSSの機能が標準で使えるようになっています。

「v3からの移行はどれくらい大変？」「新機能は何が変わったの？」「個人開発でどう使えばいい？」——本記事ではこれらの疑問に答えながら、Tailwind CSS v4を今日から実践投入するための完全ガイドをお届けします。

Tailwind CSS v4とは？v3から何が変わったか

Tailwind CSS v4は、単なるバグ修正や機能追加ではなく、エンジンとコンフィグ方式の根本的な刷新です。大きく4つのポイントで変わりました。

① エンジン刷新：Rustベースで最大10倍高速化

v4ではビルドエンジンが完全に書き直されました。内部的にRustを活用した新エンジン「Lightning CSS」をベースにしており、v3と比べてインクリメンタルビルドが最大5〜10倍高速化されています。大規模プロジェクトほど恩恵が大きく、保存するたびにスタイルが即反映される体験が実現しています。

② CSS-firstな設定：tailwind.config.jsが不要に

v3では tailwind.config.js でテーマをカスタマイズしていましたが、v4では CSSファイル内で @theme を使って設定します。JavaScriptの設定ファイルを廃止し、CSSのみで完結するアーキテクチャへ移行しました。

/* v3（tailwind.config.js） */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#6366f1',
      }
    }
  }
}

/* v4（CSSで設定） */
@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-sans: 'Inter', sans-serif;
  --radius-card: 12px;
}

CSSカスタムプロパティ（変数）として定義するので、ブラウザのDevToolsでリアルタイムに値を確認・変更できるメリットもあります。

③ コンテナクエリが標準搭載

v4ではメディアクエリに加え、コンテナクエリ（親要素のサイズに応じてスタイルを変えるCSS機能）がユーティリティクラスとして使えます。サイドバーの有無によってカードレイアウトを変えたい場合など、コンポーネント単位でレスポンシブを制御できます。

<div class="@container">
  <div class="grid @sm:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div class="card">...</div>
  </div>
</div>

④ P3カラー・最新CSS機能がすぐ使える

v4では oklch() などのP3カラースペース、CSS @layer、 @starting-style（アニメーション初期状態）など最新CSS機能が標準で統合されています。プレフィックスなしでそのまま使えます。

変更点 v3 v4
ビルドエンジン PostCSS + JIT Lightning CSS（Rust）
設定ファイル tailwind.config.js CSS内 @theme
コンテナクエリ プラグイン必要 標準搭載
P3カラー 非対応 oklch()で使用可
インクリメンタルビルド 〜数百ms 数ms〜数十ms
広告スペース

インストール方法：Vite・Next.js別に解説

v4のインストールはv3よりはるかにシンプルになりました。PostCSSの設定ファイルや tailwind.config.js を自分で作る必要がありません。

Vite + React（または Vite + Vanilla）の場合

# プロジェクト作成（既存プロジェクトの場合は不要）
npm create vite@latest my-app -- --template react-ts
cd my-app

# Tailwind CSS v4をインストール
npm install tailwindcss @tailwindcss/vite

# vite.config.tsにプラグインを追加

vite.config.ts に Tailwind プラグインを追加します：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'  // ← 追加

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),  // ← 追加
  ],
})

最後に、メインのCSSファイル（ src/index.css など）の先頭に一行追加します：

@import "tailwindcss";

これだけです！ tailwind.config.js も postcss.config.js も不要です。npm run dev を実行すれば、Tailwindのユーティリティクラスが使えるようになります。

Next.js の場合

npx create-next-app@latest my-app --typescript
cd my-app

# Tailwind CSS v4をインストール
npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs を作成：

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
export default config

app/globals.css の先頭を書き換え：

/* v3では以下のような記述だったが */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* v4はこれだけでOK */
@import "tailwindcss";

v3からv4への移行

既存プロジェクトの移行には、公式が提供するアップグレードツールを使うのが最も確実です。

npx @tailwindcss/upgrade@next

このコマンドが自動的に：古い設定ファイルをCSSの @theme に変換し、削除・リネームされたクラスを検知してレポートしてくれます。ただし、カスタムプラグインを使っている場合は手動での対応が必要なケースがあるため、移行後に必ず動作確認を行いましょう。

広告スペース

@theme でデザインシステムを構築する

v4の最大の変化が @theme ディレクティブです。ブランドカラー・フォント・スペーシングなど、デザインシステムの変数をCSSで一元管理できます。

カラーパレットのカスタマイズ

@import "tailwindcss";

@theme {
  /* ブランドカラー */
  --color-brand-50: oklch(97% 0.02 264);
  --color-brand-500: oklch(60% 0.18 264);
  --color-brand-900: oklch(25% 0.10 264);

  /* セマンティックカラー */
  --color-primary: var(--color-brand-500);
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;

  /* フォント */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* スペーシング */
  --spacing-section: 5rem;

  /* ボーダー半径 */
  --radius-card: 12px;
  --radius-button: 8px;
}

定義したカスタム変数はそのままユーティリティクラスとして使えます：

<!-- ブランドカラーを使う -->
<button class="bg-brand-500 hover:bg-brand-900 text-white">
  送信する
</button>

<!-- セマンティックカラー -->
<div class="bg-surface-secondary rounded-card p-6">
  カード
</div>

ダークモードの設定

v4ではダークモードもCSSカスタムプロパティで自然に管理できます。

@theme {
  --color-bg: #ffffff;
  --color-text: #0f172a;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-bg: #0f172a;
    --color-text: #f1f5f9;
  }
}

/* または手動切り替えなら */
.dark {
  --color-bg: #0f172a;
  --color-text: #f1f5f9;
}

HTMLで dark: バリアントは引き続き使えます：

<div class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">
  ダークモード対応テキスト
</div>

コンテナクエリ：コンポーネント単位のレスポンシブ

v4で待望の標準搭載となったコンテナクエリは、「ビューポート幅」ではなく「親要素の幅」に応じてスタイルを変えられるCSS機能です。個人開発でよく作る「カードグリッド」「サイドバーあり/なし対応レイアウト」で特に威力を発揮します。

基本的な使い方

<!-- 親要素に @container を付ける -->
<div class="@container">
  <!--
    親の幅が sm(384px) 以上なら2列、
    lg(512px) 以上なら3列
  -->
  <div class="grid @sm:grid-cols-2 @lg:grid-cols-3 gap-6">
    <div class="bg-white rounded-xl shadow p-4">カード1</div>
    <div class="bg-white rounded-xl shadow p-4">カード2</div>
    <div class="bg-white rounded-xl shadow p-4">カード3</div>
  </div>
</div>

ビューポートのブレークポイント（ sm: md: lg: ）とは独立しているので、同じコンポーネントをサイドバーがある画面にもない画面にも配置でき、それぞれ適切なレイアウトになります。

名前付きコンテナ

<div class="@container/card">
  <img class="@sm/card:float-right">
  <p>テキスト</p>
</div>
広告スペース

実践：個人開発ダッシュボードのUIを作る

実際にTailwind CSS v4を使って、個人開発ツールのダッシュボード画面を作ってみましょう。Webサービスの状態監視ダッシュボード（PagePulseのようなWebページ監視ツールのUI）を例にします。

ステータスカードコンポーネント

<!-- globals.css -->
@import "tailwindcss";

@theme {
  --color-up: oklch(65% 0.18 142);    /* 緑 */
  --color-down: oklch(65% 0.20 25);   /* 赤 */
  --color-warn: oklch(75% 0.18 72);   /* 黄 */
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --radius-card: 16px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

<!-- index.html -->
<div class="min-h-screen bg-surface-secondary font-sans">

  <!-- ヘッダー -->
  <header class="border-b border-slate-200 bg-surface px-6 py-4">
    <h1 class="text-xl font-bold text-slate-900">監視ダッシュボード</h1>
  </header>

  <!-- メインコンテンツ -->
  <main class="mx-auto max-w-6xl px-4 py-8">

    <!-- サマリーカード群 -->
    <div class="@container mb-8">
      <div class="grid @sm:grid-cols-3 gap-4">

        <!-- 正常件数 -->
        <div class="rounded-card bg-surface p-6 shadow-sm border border-slate-200">
          <p class="text-sm text-slate-500">正常稼働</p>
          <p class="mt-1 text-3xl font-bold text-up">24</p>
          <p class="mt-1 text-xs text-slate-400">last check: 1分前</p>
        </div>

        <!-- 障害件数 -->
        <div class="rounded-card bg-surface p-6 shadow-sm border border-red-100">
          <p class="text-sm text-slate-500">障害中</p>
          <p class="mt-1 text-3xl font-bold text-down">2</p>
          <p class="mt-1 text-xs text-red-400">対応が必要です</p>
        </div>

        <!-- 平均応答時間 -->
        <div class="rounded-card bg-surface p-6 shadow-sm border border-slate-200">
          <p class="text-sm text-slate-500">平均応答時間</p>
          <p class="mt-1 text-3xl font-bold text-slate-800">182ms</p>
          <p class="mt-1 text-xs text-slate-400">過去24時間</p>
        </div>

      </div>
    </div>

    <!-- 監視リスト -->
    <div class="space-y-3">
      <div class="flex items-center justify-between rounded-card bg-surface px-6 py-4 shadow-sm">
        <div class="flex items-center gap-3">
          <span class="size-3 rounded-full bg-up"></span>
          <span class="font-medium text-slate-800">https://example.com</span>
        </div>
        <span class="text-sm text-slate-500">245ms</span>
      </div>
    </div>

  </main>
</div>

v4の @theme で定義したカスタムカラー（ text-up text-down ）やボーダー半径（ rounded-card ）がそのままユーティリティクラスとして使えているのがわかります。デザインシステムの変数とTailwindクラスが完全に一体化しています。

よく使うユーティリティパターン集（v4対応）

v4でも基本のユーティリティクラスはv3と互換性があります。よく使うパターンをまとめておきます。

フレックス・グリッドレイアウト

<!-- 中央揃え -->
<div class="flex items-center justify-center gap-4">...</div>

<!-- レスポンシブグリッド -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">...</div>

<!-- スペース均等配置 -->
<div class="flex items-center justify-between">...</div>

タイポグラフィ

<!-- 見出し -->
<h1 class="text-3xl font-bold tracking-tight text-slate-900">タイトル</h1>
<h2 class="text-xl font-semibold text-slate-700">サブタイトル</h2>

<!-- 本文・補足 -->
<p class="text-base leading-relaxed text-slate-600">本文</p>
<p class="text-sm text-slate-400">補足テキスト</p>

<!-- 行数制限（3行で省略） -->
<p class="line-clamp-3 text-slate-600">長いテキスト...</p>

ボタン

<!-- プライマリボタン -->
<button class="rounded-button bg-brand-500 px-5 py-2.5 text-sm font-semibold text-white
  hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-500
  focus:ring-offset-2 active:scale-95 transition-all">
  送信する
</button>

<!-- ゴーストボタン -->
<button class="rounded-button border border-slate-300 px-5 py-2.5 text-sm font-medium
  text-slate-700 hover:bg-slate-50 transition-colors">
  キャンセル
</button>

カード

<div class="rounded-card bg-white shadow-sm ring-1 ring-slate-200 p-6
  hover:shadow-md transition-shadow">
  <h3 class="font-semibold text-slate-800">カードタイトル</h3>
  <p class="mt-2 text-sm text-slate-500">説明文</p>
</div>

Cloudflare Pages + Viteでデプロイする

個人開発でTailwindを使う場合、フロントエンドのホスティングには Cloudflare Pagesが無料で使えておすすめです。ViteプロジェクトならビルドしてPagesにデプロイするだけです。

# ビルド
npm run build
# dist/ フォルダが生成される

# Cloudflare Pages CLIでデプロイ
npx wrangler pages deploy dist --project-name=my-app

Tailwind CSS v4のビルド出力は最適化されており、使用しているクラスのみがCSSに含まれます。最終的なCSSファイルは数KB〜数十KBに収まることがほとんどです。

作ったWebサービスが正常に動き続けているか確認するには、PagePulseのような監視ツールを使うと安心です。デプロイ後に設定しておくと、サイトがダウンしたときにすぐ気づけます。

v3との互換性と注意点

v4はv3と後方互換性が高いように設計されていますが、いくつかの破壊的変更があります。移行前に確認しておきましょう。

削除・変更されたクラス

  • overflow-ellipsis → text-ellipsis に統合
  • decoration-clone / decoration-slice → box-decoration-clone / box-decoration-slice
  • flex-shrink-0 → shrink-0（短縮形が標準に）
  • transform / filter / backdrop-filter クラスが不要に（自動適用）

PostCSSプラグインの変更

v3では tailwindcss パッケージ自体がPostCSSプラグインでしたが、v4では @tailwindcss/postcss が別パッケージになっています。

/* v3の postcss.config.js */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

/* v4の postcss.config.mjs */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    // autoprefixerは不要になった（Lightning CSSが内包）
  }
}

まとめ：Tailwind CSS v4は個人開発者の最高の相棒

Tailwind CSS v4は、設定の複雑さを大幅に削減しながら、コンテナクエリや最新CSSサポートという強力な機能を手に入れました。個人開発者にとっては：

  • ✅ セットアップが2〜3ステップで完了（設定ファイル不要）
  • ✅ ビルドが体感で数倍速くなった（開発体験が向上）
  • ✅ デザインシステムをCSSで一元管理（@theme が強力）
  • ✅ コンテナクエリで再利用性の高いUIを書ける
  • ✅ 最終CSSサイズが小さい（パフォーマンス有利）

v3から移行する場合は npx @tailwindcss/upgrade@next で自動化できます。新規プロジェクトであれば、今すぐv4で始めることを強くおすすめします。

UIを作ったら、Webアプリの長文ページをAIで素早く要約したい場面では QuickSummary（AI要約Chrome拡張）が役に立ちます。リサーチ効率を大幅に上げられますよ。

また、個人開発のサービスが安定稼働しているかを外部ユーザーに伝えたいなら、StatusCraftでステータスページを作るのがおすすめです。Tailwindで作った美しいUIと合わせて、プロダクトの信頼感を高められます。

🎨 Tailwind CSS v4を今すぐ試してみよう

npm install tailwindcss @tailwindcss/vite でインストール完了。@import "tailwindcss" の一行で、モダンCSSの世界が広がります。

Tailwind CSS 公式ドキュメントを見る →
広告スペース