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を採用し、既存プロジェクトは移行ツールを使って段階的に移行することをお勧めします。

参考リソース

• Tailwind CSS 公式ドキュメント
• Tailwind CSS v4.0 リリースブログ
• Tailwind CSS GitHub

×

PR

×

PR