Tailwind CSS v4がリリース - Rustベースの新エンジンで10倍高速化

Tailwind CSS v4の革新

Tailwind CSS v4は、フレームワークの完全な再設計を実現したメジャーリリースです。Rustで書かれた新エンジン「Oxide」の採用により、ビルドパフォーマンスが劇的に向上しました。

flowchart LR
    CSS["CSS入力<br/>(@import)"]
    Oxide["Oxide Engine<br/>(Rust)"]
    Lightning["Lightning CSS"]
    Content["Content Detection"]
    Output["Minified Output"]

    CSS --> Oxide --> Lightning
    Oxide --> Content
    Lightning --> Output

パフォーマンス比較: v3: 1000ms → v4: 100ms (10x faster)

CSS-first設定への移行

v4では、JavaScriptの設定ファイルからCSSベースの設定に移行しました：

/* v4: CSS-first configuration */
@import "tailwindcss";

@theme {
  /* カスタムカラー */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;

  /* カスタムフォント */
  --font-display: "Inter", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;

  /* カスタムスペーシング */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* カスタムブレークポイント */
  --breakpoint-3xl: 1920px;

  /* カスタムアニメーション */
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

v3設定からの移行

// v3: tailwind.config.js (旧方式)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
      },
    },
  },
}

// v4: 上記のCSS設定に自動変換可能
// npx @tailwindcss/upgrade コマンドで移行

新機能ハイライト

1. ネイティブコンテナクエリ

<!-- コンテナクエリが標準サポート -->
<div class="@container">
  <div class="@sm:flex @md:grid @lg:grid-cols-3">
    <!-- コンテナサイズに応じたレイアウト -->
    <div class="@sm:w-full @md:w-1/2 @lg:w-auto">
      コンテンツ
    </div>
  </div>
</div>

<!-- 名前付きコンテナ -->
<div class="@container/sidebar">
  <div class="@md/sidebar:hidden">
    サイドバー専用のレスポンシブ
  </div>
</div>

2. CSSカスケードレイヤー

/* Tailwindが自動的にレイヤーを管理 */
@layer theme, base, components, utilities;

/* カスタムスタイルの優先度を制御 */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

3. 3D変換ユーティリティ

<!-- 3D変換が標準サポート -->
<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    3D変換されたコンテンツ
  </div>
</div>

<!-- preserve-3d で子要素の3D配置を維持 -->
<div class="transform-style-preserve-3d">
  <div class="rotate-y-180 backface-hidden">
    フリップカードの裏面
  </div>
</div>

4. 新しいグラデーション構文

<!-- 複数のカラーストップ -->
<div class="bg-linear-to-r from-blue-500 via-purple-500 via-50% to-pink-500">
  グラデーション背景
</div>

<!-- 放射状グラデーション -->
<div class="bg-radial from-white to-gray-200">
  円形グラデーション
</div>

<!-- 円錐グラデーション -->
<div class="bg-conic from-red-500 via-yellow-500 to-red-500">
  カラーホイール風
</div>

パフォーマンス比較

ビルドパフォーマンス比較 (大規模プロジェクト 10,000ファイル)

Lightning CSSの統合

v4ではLightning CSSがデフォルトで統合され、以下の機能が利用可能：

/* 自動ベンダープレフィックス */
.element {
  user-select: none; /* 自動的に -webkit-user-select を追加 */
  backdrop-filter: blur(10px); /* Safari対応も自動 */
}

/* モダンCSS構文の自動変換 */
.container {
  /* ネスト構文がネイティブサポート */
  & .child {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

/* CSS変数のフォールバック自動生成 */
.text {
  color: oklch(70% 0.15 250); /* 非対応ブラウザ向けにrgbへ変換 */
}

ゼロ設定コンテンツ検出

自動コンテンツ検出

v3 (手動設定が必要):

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

v4 (自動検出):

@import "tailwindcss";
/* 設定不要！自動でスキャン */

検出対象: .html, .js, .jsx, .ts, .tsx, .vue, .svelte, .astro, .mdx など

移行ツールの使用

# 自動アップグレードツール
npx @tailwindcss/upgrade

# 移行される内容:
# 1. tailwind.config.js → CSS @theme への変換
# 2. PostCSS設定の更新
# 3. @apply ディレクティブの最適化
# 4. 非推奨クラスの置換

# Vite設定例
npm install tailwindcss@latest @tailwindcss/vite

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

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

主要な破壊的変更

今後の展望

Tailwind CSS v4は、モダンCSSの機能を最大限に活用しながら、開発者体験を大幅に向上させました。Rustベースのエンジンにより、大規模プロジェクトでも快適な開発が可能になります。

参考リンク

• Tailwind CSS v4.0 公式アナウンス
• 移行ガイド
• Lightning CSS