ドキュメントブログショーケースプラス

Tailwind CSS v4.0 のオープンソース化の進捗状況

Adam Wathan
Tailwind CSS v4.0-alpha

昨年の夏、Tailwind Connect で Oxide のプレビュー を公開しました。Oxide は、開発者体験を簡素化し、近年のウェブプラットフォームの進化を活用するように設計された、Tailwind CSS のための新しい高性能エンジンです。

この新しいエンジンは当初 v3.x リリースとして出荷される予定でしたが、後方互換性を重視しているとはいえ、これは明らかにフレームワークの新世代であると感じられるため、v4.0 に値すると考えました。

まだ初期段階であり、やるべきことはたくさんあります が、本日、進捗状況をオープンソース化 し、最初の公開 v4.0.0-alpha をタグ付けしました。これにより、皆様は実験を開始し、今年の後半の安定版リリースに向けてご協力いただけます。

安定版リリースへの期待感を高めるために、ここでは簡潔に説明しますが、非常に初期の実験的なものを試してみたい場合は、始めるのに十分な情報がここにあるはずです。

スピードのために構築された新しいエンジン

新しいエンジンは、フレームワークについて現在知っているすべてのことを利用して、問題空間をより適切にモデル化し、コード量を大幅に削減して高速化するために、ゼロから書き直されました。

  • 最大10倍の高速化 — Tailwind CSS ウェブサイトのフルビルドを 960ms ではなく 105ms で、または Catalyst UI キットを 341ms ではなく 55ms で実行できます。
  • フットプリントの削減 — 新しいエンジンは、Rust と Lightning CSS で書き直した部分のような、より重いネイティブパッケージを同梱しているにもかかわらず、インストール後のサイズが 35% 以上小さくなっています。
  • 重要な部分に Rust を採用 — フレームワークの最もコストのかかる並列化可能な部分の一部を Rust に移行しましたが、拡張性のためにフレームワークのコアは TypeScript のままにしています。
  • 依存関係は 1 つ — 新しいエンジンが依存するのは Lightning CSS だけです。
  • カスタムパーサー — 独自の CSS パーサーを作成し、ニーズに合わせてデータ構造を設計したことで、PostCSS を使用していたときよりも 2 倍以上高速に解析できるようになりました。

統合されたツールチェーン

Tailwind CSS v4 は、もはや単なるプラグインではありません。CSS を処理するためのオールインワンツールです。Lightning CSS をフレームワークに直接統合したため、CSS パイプラインについて何も設定する必要はありません。

  • @import 処理の組み込み — postcss-import のようなツールをセットアップして構成する必要はありません。
  • ベンダープレフィックスの組み込み — プロジェクトに autoprefixer を追加する必要はもうありません。
  • ネストサポートの組み込み — ネストされた CSS をフラット化するためにプラグインは不要で、すぐに使用できます。
  • 構文変換 — oklch() カラーやメディアクエリ範囲などの最新の CSS 機能は、ブラウザのサポートが向上した構文にトランスパイルされます。

PostCSS プラグインは引き続き提供しますが、ファーストパーティのバンドラプラグインも検討しており、この最初のアルファリリースでは、本日お試しいただける公式の Vite プラグインも提供しています。

現代のウェブ向けに設計

Tailwind CSS v4 では未来を見据え、今後数年間最先端であり続けるフレームワークを構築しようとしています。

  • ネイティブカスケードレイヤー — 実際の @layer ルールを使用するようになり、過去に苦労してきた多くの特異性の問題を解決します。
  • 明示的に定義されたカスタムプロパティ — @property を使用して、内部カスタムプロパティを適切な型と制約で定義し、背景グラデーションのトランジションなどの実行を可能にします。
  • 不透明度修飾子に color-mix を使用 — CSS 変数を色に使用したり、currentColor の不透明度を調整したりする場合でも、不透明度修飾子構文をこれまで以上に簡単に使用できるようにします。
  • コアにコンテナクエリ — コンテナクエリのサポートをコアに直接追加し、コンテナクエリ範囲をサポートするための新しい @min-* および @max-* バリアントを追加しました。

また、ワイドガマットカラーでカラーパレットを刷新し、@starting-style、アンカーポジショニングなどの最新の CSS 機能のサポートを導入する作業も進めています。

コンポーザブルなバリアント

新しいアーキテクチャにより、group-*、peer-*、has-*、および v4 で導入する新しい not-* バリアントなど、他のセレクターに作用するバリアントを組み合わせることが可能になります。

以前のリリースでは、group-has-* のようなバリアントはフレームワークで明示的に定義されていましたが、現在では group-* は既存の has-* バリアントと組み合わせることができ、has-* バリアントは focus のような他のバリアントと組み合わせることができます。

index.html
<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
  <div class="group-has-focus:opacity-100">
      <!-- ... -->
    </div>
  </div>
</div>

このコンポーザビリティに制限はなく、たとえば、何らかの恐ろしい理由で必要な場合は、group-not-has-peer-not-data-active:underline のようなものも記述できます。

ゼロ構成のコンテンツ検出

少なくともこれらの初期アルファリリースでは、content パスを設定することさえできないことに気づくでしょう。ほとんどのプロジェクトでは、二度とこれを行う必要はありません。Tailwind がテンプレートファイルを自動的に見つけてくれます。

Tailwind をプロジェクトに統合する方法に応じて、次の 2 つの方法のいずれかを使用してこれを行います。

  • PostCSS プラグインまたは CLI を使用する場合、Tailwind はプロジェクト全体をクロールしてテンプレートファイルを探します。.gitignore ファイルにあるディレクトリをクロールしない、バイナリファイル形式を無視するなど、高速化のために組み込まれた多数のヒューリスティックを使用します。

  • Vite プラグインを使用する場合、モジュールグラフに依存します。これにより、実際に使用しているファイルを正確に把握できるため、パフォーマンスが最大限に向上し、誤検知や誤否定がなくなります。将来的には、このアプローチを Vite エコシステム以外にも他のバンドラプラグインで拡張したいと考えています。

コンテンツパスを明示的に設定する方法は今後確実に追加しますが、この自動アプローチがすべての人にどの程度うまく機能するかを知りたいと考えています。私たち自身のプロジェクトでは非常にうまく機能しています。

CSS ファーストの構成

Tailwind CSS v4.0 の主な目標は、フレームワークを CSS ネイティブのように感じさせ、JavaScript ライブラリのように感じさせないようにすることです。

インストールしたら、通常の CSS @import ステートメントでプロジェクトに追加します。

main.css
@import "tailwindcss";

JavaScript 構成ファイルですべてのカスタマイズを設定する代わりに、CSS 変数を使用するだけです。

main.css
@import "tailwindcss";
@theme {
  --font-family-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

特別な @theme ディレクティブは、Tailwind にこれらの変数に基づいて新しいユーティリティとバリアントを作成するように指示し、マークアップで 3xl:text-neon-lime のようなクラスを使用できるようにします。

index.html
<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Data to <span class="text-neon-cyan">enrich</span> your online business
  </h1>
</div>

新しい CSS 変数を追加すると、フレームワークの以前のバージョンでの extend と同様に動作しますが、カスタム値をすべて定義する前に --color-*: initial のような構文で名前空間をクリアすることで、変数セット全体をオーバーライドできます。

main.css
@import "tailwindcss";
@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

まだ命名規則の一部を微調整していますが、GitHub でデフォルトテーマを確認 して、カスタマイズ可能な内容を確認できます。

デフォルトテーマを明示的にクリアしたくない場合や、ゼロから始めたい場合は、"tailwindcss/preflight" と "tailwindcss/utilities" を直接インポートして、デフォルトテーマのインポートをスキップできます。

main.css
@import "tailwindcss";
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);
@theme {
  --color-*: initial; 
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

また、すべてのテーマ値をカスタム CSS のネイティブ CSS 変数として利用できるようにします。

dist/main.css
:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

これにより、theme() 関数を必要とせずに、任意の値を扱うときにテーマ値を簡単に参照できます。

index.html
<div class="p-[calc(var(--spacing-6)-1px)]">
  <!-- ... -->
</div>

また、resolveConfig() 関数を使用せずに、Framer Motion のような UI ライブラリを使用する際にテーマ値を使用することもできます。

JSX
import { motion } from "framer-motion";
export const MyComponent = () => (
  <motion.div initial={{ y: "var(--spacing-8)" }} animate={{ y: 0 }} exit={{ y: "var(--spacing-8)" }}>
    {children}
  </motion.div>
);

変更点

破壊的な変更は軽々には行いませんが、v4 でこれまでと異なる点がいくつかあり、共有する価値があります。

  • 非推奨のユーティリティを削除 — text-opacity-*、flex-grow-*、decoration-slice など、以前にドキュメント化を停止したユーティリティを削除し、text-{color}/*、grow-*、box-decoration-slice などの最新の代替ユーティリティに置き換えました。
  • PostCSS プラグインと CLI は別パッケージ — メインの tailwindcss パッケージには、誰もが必要とするわけではないため、これらは含まれなくなりました。代わりに、@tailwindcss/postcss と @tailwindcss/cli を使用して個別にインストールする必要があります。
  • デフォルトのボーダーカラーなし — border ユーティリティは以前はデフォルトで gray-200 でしたが、ブラウザと同様にデフォルトで currentColor になりました。zinc や slate などの別のグレーをメインのグレーとして使用している場合に、間違ったグレーを誤ってプロジェクトに導入してしまうのを防ぐために、この変更を行いました。
  • リングはデフォルトで 1px — ring ユーティリティは以前はデフォルトで 3px の青いリングでしたが、現在は currentColor を使用した 1px のリングになりました。プロジェクトでボーダーの代替として ring-* ユーティリティを使用し、フォーカスリングに outline-* を使用することが多いため、ここで一貫性を持たせることは役立つ変更だと考えています。

他にも、プロジェクトで何らかの形で表面化する可能性のある、非常に低レベルの実装詳細の変更がいくつかありますが、これらの変更のような意図的なものはありません。何か驚くべきことに遭遇した場合は、お知らせください。

v4.0 へのロードマップ

この新しいエンジンはゼロから書き直されたものであり、これまで新しい構成アプローチを使用した再構築された開発者エクスペリエンスに完全に焦点を当ててきました。

私たちは後方互換性に非常に価値を置いています。今年の後半に安定版 v4.0 リリースをタグ付けできるようになるまでの作業の大部分はそこにあります。

  • JavaScript 構成ファイルのサポート — v4 への移行を容易にするために、従来の tailwind.config.js ファイルとの互換性を再導入します。
  • 明示的なコンテンツパス構成 — 自動コンテンツ検出がセットアップに適していない場合に、テンプレートがどこにあるかを Tailwind に正確に伝えることができるようにします。
  • 他のダークモードのサポート — 現在、メディアクエリを使用したダークモードのみをサポートしており、セレクターとバリアント戦略を再実装する必要があります。
  • プラグインとカスタムユーティリティ — プラグインのサポート、またはバリアントと自動的に連携するカスタムユーティリティの記述はまだサポートしていません。安定版リリース前には、もちろんこれを機能させる予定です。
  • プレフィックスのサポート — クラスのプレフィックスを設定する方法はまだありませんが、必ず戻します。
  • セーフリストとブロックリスト — 特定のクラスを Tailwind に強制的に生成させたり、他のクラスの生成を阻止したりすることはまだできません。
  • important 構成のサポート — 現在、すべてのユーティリティを !important で生成する方法はありませんが、実装する予定です。
  • theme() 関数のサポート — 新しいプロジェクトでは var() を使用できるため必要ありませんが、後方互換性のために実装します。
  • スタンドアロン CLI — 新しいエンジンのスタンドアロン CLI にはまだ取り組んでいませんが、v4.0 リリース前には絶対に用意する予定です。

それ以外にも、修正すべきバグ、こっそり追加するエキサイティングな新しい CSS 機能、および適切なリリース前にもう少し磨きが必要なこれらの新しい API の一部を改良する必要があることは間違いありません。

具体的なリリース時期について約束したくはありませんが、個人的には夏休みシーズンが始まる前に v4.0 を安定版としてマークしたいと考えています。

アルファ版をお試しください

すでにいくつかのアルファ版リリースをタグ付けしており、今日からプロジェクトで試すことができます。

VS Code 用の Tailwind CSS IntelliSense 拡張機能を使用している場合は、拡張機能ページからプレリリースバージョンに切り替えてください。Prettier プラグインを使用している場合は、最新バージョンをインストールしてください。

問題を見つけた場合は、GitHub でお知らせください。安定版リリースをタグ付けする前に、これを完璧なものにしたいと考えており、発見した問題を報告していただくことは、私たちにとって非常に役立ちます。

Vite を使用する場合

Tailwind CSS v4 アルファ版と新しい Vite プラグインをインストールします。

npm install tailwindcss@next @tailwindcss/vite@next

次に、vite.config.ts ファイルにプラグインを追加します。

vite.config.ts
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [tailwindcss()],
});

最後に、メインの CSS ファイルに Tailwind をインポートします。

app.css
@import "tailwindcss";

PostCSS を使用する場合

Tailwind CSS v4 アルファ版と個別の PostCSS プラグインパッケージをインストールします。

npm install tailwindcss@next @tailwindcss/postcss@next

次に、postcss.config.js ファイルにプラグインを追加します。

postcss.config.js
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

最後に、メインの CSS ファイルに Tailwind をインポートします。

app.css
@import "tailwindcss";

CLI を使用する場合

Tailwind CSS v4 アルファ版と個別の CLI パッケージをインストールします。

npm install tailwindcss@next @tailwindcss/cli@next

次に、メインの CSS ファイルに Tailwind をインポートします。

app.css
@import "tailwindcss";

最後に、CLI ツールを使用して CSS をコンパイルします。

npx @tailwindcss/cli@next -i app.css -o dist/app.css

最新情報をメールでお届けします。
ニュースレターにご登録ください。

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー