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

Tailwind CSS v4.0

Adam Wathan
Tailwind CSS v4.0

ついに完成しました！ – Tailwind CSS v4.0 をリリースしました。

Tailwind CSS v4.0 は、パフォーマンスと柔軟性を最適化し、設定とカスタマイズ体験を一新し、最新のウェブプラットフォームの進歩を最大限に活用した、まったく新しいバージョンのフレームワークです。

Tailwind CSS v4.0 を今日から使い始めるには、新しいプロジェクトにインストールするか、Tailwind Play でブラウザ上で直接試してみてください。

既存のプロジェクト向けには、包括的なアップグレードガイドを公開し、自動アップグレードツールを構築して、可能な限り迅速かつ苦痛なく最新バージョンに移行できるようにしました。

新しい高性能エンジン

Tailwind CSS v4.0 は、フレームワークのアーキテクチャについて長年学んできたすべてを取り入れ、可能な限り高速になるように最適化された、基盤からの書き換えです。

独自のプロジェクトでベンチマークを行ったところ、フルリビルドは 3.5 倍以上高速になり、インクリメンタルビルドは 8 倍以上高速になることがわかりました。

Tailwind CSS v4.0 と Catalyst をベンチマークした際に確認された中央ビルド時間は次のとおりです。

v3.4v4.0改善
フルビルド378ms100ms3.78倍
新しい CSS を使用したインクリメンタルリビルド44ms5ms8.8倍
新しい CSS を使用しないインクリメンタルリビルド35ms192µs182倍

最も印象的な改善点は、実際には新しい CSS をコンパイルする必要がないインクリメンタルビルドです。これらのビルドは 100 倍以上高速で、マイクロ秒単位で完了します。プロジェクトに取り組む時間が長くなるほど、flex、col-span-2、font-boldなどの以前に使用したクラスを使用するだけなので、これらのビルドに遭遇する機会が増えます。

現代のウェブ向けに設計

Tailwind CSS v3.0 をリリースしてからプラットフォームは大きく進化しており、v4.0 はこれらの改善点の多くを最大限に活用しています。

CSS
@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

最新の CSS 機能を活用しています。

  • ネイティブカスケードレイヤー — さまざまなスタイルルールが相互にどのように相互作用するかをこれまで以上に制御できます。
  • 登録済みカスタムプロパティ — グラデーションのアニメーション化や、大規模なページでのパフォーマンスの大幅な向上などを可能にします。
  • color-mix() — CSS 変数や currentColor を含む任意の色値の不透明度を調整できます。
  • 論理プロパティ — RTL サポートを簡素化し、生成される CSS のサイズを縮小します。

これらの機能の多くは、Tailwind 内部を簡素化し、バグの表面領域を削減し、フレームワークの保守を容易にしました。

インストールがより簡単に

v4.0 では、セットアッププロセスが大幅に合理化され、手順数が減り、多くのボイラープレートが削除されました。

1. Tailwind CSS をインストール
npm i tailwindcss @tailwindcss/postcss;
2. PostCSS プラグインを追加
export default {
  plugins: ["@tailwindcss/postcss"],
};
3. CSS で Tailwind をインポート
@import "tailwindcss";

v4.0 のこのプロセスに対して行った改善により、Tailwind はこれまで以上に軽量に感じられます。

  • CSS 1 行だけ — @tailwind ディレクティブは不要になり、@import "tailwindcss" を追加してビルドを開始するだけです。
  • 設定不要 — テンプレートファイルへのパスなど、何も設定せずにフレームワークの使用を開始できます。
  • 外部プラグインは不要 — @import ルールをすぐにバンドルし、ベンダープレフィックスと最新の構文変換には Lightning CSS を内部で使用します。

確かに、プロジェクトごとに一度だけこれを行うだけですが、週末ごとに異なるサイドプロジェクトを開始して放棄する場合、積み重ねられます。

ファーストパーティの Vite プラグイン

Vite ユーザーの場合は、PostCSS の代わりに @tailwindcss/vite を使用して Tailwind を統合できるようになりました。

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

Tailwind CSS v4.0 は PostCSS プラグインとして使用すると非常に高速ですが、Vite プラグインを使用するとさらに優れたパフォーマンスが得られます。

コンテンツの自動検出

Tailwind CSS v3 で常に面倒な content 配列を設定する必要があったことをご存知ですか？ v4.0 では、そのすべてを自動的に検出するための多くのヒューリスティックを考案し、まったく設定する必要がなくなりました。

たとえば、.gitignore ファイル内のものをすべて自動的に無視して、バージョン管理下にない依存関係や生成されたファイルをスキャンしないようにします。

.gitignore
/node_modules
/coverage
/.next/
/build

また、画像、ビデオ、.zip ファイルなどのすべてのバイナリ拡張子も自動的に無視します。

デフォルトで除外されているソースを明示的に追加する必要がある場合は、CSS ファイルの @source ディレクティブでいつでも追加できます。

CSS
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

@source ディレクティブは内部で同じヒューリスティックを使用するため、たとえばバイナリファイルタイプも除外します。スキャンする拡張子をすべて明示的に指定する必要はありません。

詳細については、ソースファイル内のクラスの検出に関する新しいドキュメントをご覧ください。

組み込みのインポートサポート

v4.0 より前は、@import を使用して他の CSS ファイルをインライン化する場合は、postcss-import などの別のプラグインを設定して処理する必要がありました。

現在、これをすぐに処理するため、他のツールは必要ありません。

postcss.config.js
export default {
  plugins: [
    "postcss-import",
    "@tailwindcss/postcss",
  ],
};

当社のインポートシステムは Tailwind CSS 専用に構築されているため、エンジンと緊密に統合することでさらに高速化することができました。

CSS ファーストの設定

Tailwind CSS v4.0 の最大の変更点の 1 つは、プロジェクトの設定を JavaScript から CSS で行うように移行したことです。

tailwind.config.js ファイルの代わりに、Tailwind をインポートする CSS ファイルで直接すべてのカスタマイズを設定できるため、プロジェクト内で心配する必要のあるファイルが 1 つ減ります。

CSS
@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

新しい CSS ファーストの設定では、デザイン トークンの設定、カスタムユーティリティとバリアントの定義など、tailwind.config.js ファイルで実行できたほとんどすべてのことを実行できます。

仕組みの詳細については、新しいテーマ変数ドキュメントをお読みください。

CSS テーマ変数

Tailwind CSS v4.0 は、すべてのデザイン トークンを CSS 変数としてデフォルトで利用できるようにするため、CSS だけでランタイムに必要な値を参照できます。

前の例の @theme を使用すると、これらの値はすべて通常のカスタムプロパティとして CSS に追加されます。

生成された CSS
:root {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

これにより、これらの値をインラインスタイルとして再利用したり、Motion などのライブラリに渡してアニメーション化したりすることが容易になります。

動的なユーティリティ値とバリアント

v4.0 では、多くのユーティリティとバリアントの動作を簡素化しました。これにより、設定や任意の構文への切り替えを必要とせずに、特定のタイプの任意の値を受け入れることができるようになりました。

たとえば、Tailwind CSS v4.0 では、任意のサイズのグリッドをすぐに作成できます。

HTML
<div class="grid grid-cols-15">
  <!-- ... -->
</div>

また、カスタムのブールデータ属性を定義せずにターゲットにすることもできます。

HTML
<div data-current class="opacity-75 data-current:opacity-100">
  <!-- ... -->
</div>

px-*、mt-*、w-*、h-* などのスペーシングユーティリティでさえ、単一のスペーシングスケール変数から動的に派生し、任意の値をすぐに受け入れるようになりました。

生成された CSS
@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .pr-29 {
    padding-right: calc(var(--spacing) * 29);
  }
}

v4.0 とともにリリースしたアップグレードツールは、不要になった任意の値を使用していることに気付いた場合、これらのユーティリティのほとんどを自動的に簡素化します。

現代的な P3 カラーパレット

デフォルトのカラーパレット全体を rgb から oklch にアップグレードし、より広い色域を活用して、以前は sRGB 色空間によって制限されていた場所で色をより鮮やかにしました。

すべての色のバランスを v3 と同じになるように努めてきました。そのため、全体的にリフレッシュしましたが、既存のプロジェクトをアップグレードする際に破壊的な変更のように感じることはないはずです。

コンテナクエリ

v4.0 のコアにコンテナクエリのサポートを追加したため、@tailwindcss/container-queries プラグインはもう必要ありません。

HTML
<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

また、新しい @max-* バリアントを使用して、最大幅コンテナクエリのサポートも追加しました。

HTML
<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

通常のブレークポイントバリアントと同様に、@min-* バリアントと @max-* バリアントをスタックして、コンテナクエリ範囲を定義することもできます。

HTML
<div class="@container">
  <div class="flex @min-md:@max-xl:hidden">
    <!-- ... -->
  </div>
</div>

詳細については、完全に新しいコンテナクエリドキュメントをご覧ください。

新しい 3D 変形ユーティリティ

rotate-x-*、rotate-y-*、scale-z-*、translate-z-* など、3D 変形を実行するための API をついに​​追加しました。

Michael Foster

コンバージョン率を向上させましょう

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>

開始するには、更新されたtransform-style、rotate、perspective、およびperspective-originドキュメントをご覧ください。

拡張されたグラデーション API

v4.0 では多数の新しいグラデーション機能が追加されたため、カスタム CSS を記述しなくても、さらに凝った効果を実現できます。

線形グラデーション角度

線形グラデーションが値として角度をサポートするようになったため、bg-linear-45 などのユーティリティを使用して 45 度の角度でグラデーションを作成できます。

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

bg-gradient-* を bg-linear-* に名前変更したことにも気付くかもしれません。理由はすぐにわかります！

グラデーション補間修飾子

修飾子を使用してグラデーションの色補間モードを制御する機能を追加しました。たとえば、bg-linear-to-r/srgb のようなクラスは sRGB を使用して補間し、bg-linear-to-r/oklch は OKLCH を使用して補間します。

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

OKLCH や HSL などの極座標色空間を使用すると、from-* および to-* の色が色相環上で大きく離れている場合に、より鮮やかなグラデーションにつながる可能性があります。v4.0 ではデフォルトで OKLAB を使用していますが、これらの修飾子の 1 つを追加することで、常に別の色空間を使用して補間できます。

円錐グラデーションと放射状グラデーション

円錐グラデーションと放射状グラデーションを作成するための新しい bg-conic-* および bg-radial-* ユーティリティを追加しました。

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

これらの新しいユーティリティは、既存の from-*、via-*、および to-* ユーティリティと連携して、線形グラデーションを作成するのと同じ方法で円錐グラデーションと放射状グラデーションを作成できるようにし、色補間方法を設定するための修飾子と、グラデーション位置などの詳細を制御するための任意の値のサポートが含まれています。

@starting-style サポート

新しい starting バリアントは、新しい CSS @starting-style 機能のサポートを追加し、要素が最初に表示されたときに要素のプロパティをトランジションできるようにします。

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>

@starting-style を使用すると、JavaScript をまったく必要とせずに、ページに要素が表示されるときにアニメーション化できます。ブラウザのサポートは、ほとんどのチームではまだ十分に整っていないかもしれませんが、近づいています！

not-* バリアント

新しい not-* バリアントを追加しました。これにより、CSS :not() 疑似クラスのサポートがついに追加されました。

HTML
<div class="not-hover:opacity-75">
  <!-- ... -->
</div>
CSS
.not-hover\:opacity-75:not(*:hover) {
  opacity: 75%;
}
@media not (hover: hover) {
  .not-hover\:opacity-75 {
    opacity: 75%;
  }
}

これは二重の役割を果たし、メディアクエリと @supports クエリを否定することもできます。

HTML
<div class="not-supports-hanging-punctuation:px-4">
  <!-- ... -->
</div>
CSS
.not-supports-hanging-punctuation\:px-4 {
  @supports not (hanging-punctuation: var(--tw)) {
    padding-inline: calc(var(--spacing) * 4);
  }
}

詳細については、新しいnot-* ドキュメントをご覧ください。

さらに多くの新しいユーティリティとバリアント

v4.0 には、他にも多くの新しいユーティリティとバリアントが追加されています。以下を含みます。

  • 新しいinset-shadow-* および inset-ring-* ユーティリティ — 単一の要素に最大 4 つのボックスシャドウのレイヤーを積み重ねることができます。
  • 新しいfield-sizing ユーティリティ — JavaScript を 1 行も記述せずにテキストエリアを自動サイズ変更します。
  • 新しいcolor-scheme ユーティリティ — ダークモードで醜いライトスクロールバーを最終的に取り除くことができます。
  • 新しいfont-stretch ユーティリティ — 幅の異なるバリアブルフォントを慎重に調整します。
  • 新しいinert バリアント — inert 属性でマークされた非インタラクティブ要素をスタイル設定します。
  • 新しいnth-* バリアント — 最終的に後悔する本当に巧妙なことを行うため。
  • 新しいin-* バリアント — group-* によく似ていますが、group クラスは必要ありません。
  • :popover-open のサポート — 既存の open バリアントを使用して、開いているポップオーバーもターゲットにします。
  • 新しい子孫バリアント — すべての子孫要素をスタイル設定します。良くも悪くも。

詳細については、これらの機能に関連するドキュメントを確認してください。

そして、以上が Tailwind CSS v4.0 です。 ここまで来るのに何年もかかりましたが、私たちは皆このリリースを非常に誇りに思っており、皆様がこれで何を構築するのかを楽しみにしています。

ぜひ試してみて、遊んでみて、壊してしまうかもしれません。そして、ぜひご意見をお聞かせください。

バグレポートは明日までご遠慮ください。少なくともお祝いのチームディナーを楽しみ、このホテルのホットタブで少しリラックスして、どうにか完璧なソフトウェアを出荷できたと信じさせてください。

すべての最新情報を直接受信箱に届けます。
ニュースレターにサインアップしてください。

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