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

参考リソース

• Tailwind CSS 公式ドキュメント
• Tailwind CSS GitHub
• Tailwind CSS v4 アップグレードガイド

×

PR

×

PR