Tailwind CSS 4.0 2025 - Oxide Engineで5倍高速化

Tailwind CSS 4.0 リリース

2025年1月22日、Tailwind CSS v4.0が正式リリースされました。パフォーマンスと柔軟性を最適化した全く新しいバージョンです。

Oxide Engine: Rust による再実装

最大の変更は、フレームワークのコアをRustで完全に書き直した「Oxide Engine」の導入です。

パフォーマンス向上

フルビルド: 最大5倍高速化
増分ビルド: 100倍以上高速化（マイクロ秒単位）

セットアップの簡素化

以前（v3）

/* 複数のディレクティブが必要 */
@tailwind base;
@tailwind components;
@tailwind utilities;

v4.0

/* 1行で完了 */
@import "tailwindcss";

設定ファイルも不要。テンプレートファイルは自動検出され、設定なしですぐに開始できます。

モダンCSS機能の活用

v4.0は最新のCSS機能をネイティブサポート:

Cascade Layers

/* 自動的に適用される */
@layer base { ... }
@layer components { ... }
@layer utilities { ... }

@property によるカスタムプロパティ

/* グラデーションのアニメーションが可能に */
.gradient-animated {
  background: linear-gradient(
    to right,
    var(--color-start),
    var(--color-end)
  );
  transition: --color-start 0.3s, --color-end 0.3s;
}

color-mix()

/* 色の混合が簡単に */
.mixed-color {
  background: color-mix(in srgb, var(--primary) 70%, white);
}

Viteとの統合

公式Viteプラグイン

// vite.config.js
import tailwindcss from '@tailwindcss/vite';

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

CSSファイル

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

Lightning CSSが唯一の依存関係となり、postcss-importやautoprefixerなどの追加プラグインが不要に。

カスタマイズ方法

CSS内での設定

@import "tailwindcss";

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

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

  /* カスタムスペーシング */
  --spacing-128: 32rem;
}

ユーティリティの追加

@import "tailwindcss";

@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

新機能ハイライト

論理プロパティ（RTL対応）

<!-- 左から右、右から左の両方に対応 -->
<div class="ms-4 me-2 ps-3 pe-4">
  <!-- ms: margin-inline-start -->
  <!-- me: margin-inline-end -->
  <!-- ps: padding-inline-start -->
  <!-- pe: padding-inline-end -->
</div>

コンテナクエリ

<div class="@container">
  <div class="@lg:grid-cols-3 @md:grid-cols-2 grid-cols-1">
    <!-- コンテナのサイズに基づくレスポンシブ -->
  </div>
</div>

3D変換

<div class="rotate-x-45 rotate-y-30 perspective-1000">
  3D変換された要素
</div>

ブラウザサポート

v4.0はモダンブラウザ専用:

Safari 16.4+
Chrome 111+
Firefox 128+

古いブラウザをサポートする必要がある場合は、v3.4を継続使用してください。

v3からの移行

自動移行ツール

npx @tailwindcss/upgrade

主な変更点

1. @tailwind ディレクティブ → @import "tailwindcss"
2. tailwind.config.js → @theme ブロック
3. PostCSSプラグイン → Viteプラグイン（推奨）
4. 一部のクラス名変更（移行ツールで自動対応）

非推奨の機能

/* 削除されたもの */
@apply /* 非推奨だが動作 */

/* 変更されたもの */
container /* 設定方法が変更 */

実践例

モダンなカードコンポーネント

<article class="
  bg-white dark:bg-gray-800
  rounded-2xl shadow-lg
  p-6
  hover:shadow-xl
  transition-shadow duration-300
  @container
">
  <h2 class="
    text-xl font-bold
    text-gray-900 dark:text-white
    @md:text-2xl
  ">
    タイトル
  </h2>
  <p class="
    mt-2 text-gray-600 dark:text-gray-300
    line-clamp-3
  ">
    説明文がここに入ります...
  </p>
</article>

グリッドレイアウト

<div class="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-6
">
  <!-- アイテム -->
</div>

Tailwind Plus（旧UI）

すべてのTailwind Plus（旧Tailwind UI）のサンプルがv4.0対応に更新。v4.0とv3.4のバージョンを切り替えられるピッカーも提供。

参考: Tailwind CSS v4.0

まとめ

Tailwind CSS 4.0は、Oxide Engineによる劇的なパフォーマンス向上と、ゼロ設定の簡素化を実現しました。モダンCSSの機能をフル活用し、開発者体験を大幅に改善しています。新規プロジェクトでは積極的にv4.0を採用し、既存プロジェクトは移行ツールを使って段階的に移行することをお勧めします。