TailwindCSS が終了しました。

Tailwind CSS がベータ段階に別れを告げ、v4.0 バージョンを正式にリリースします。

v4.0 バージョンは、2025 年 1 月 22 日 (米国東部標準時間) に正式にリリースされました。 UTC/GMT -5 時間。

パフォーマンスとベンチマーク結果

Tailwind CSS v4.0 のハイライトの 1 つは、新しい高性能エンジンです。アーキテクチャを完全に書き直すことにより、開発チームはビルド時間と増分リビルド速度が大幅に向上したと報告しました。

构建类型	v3.4 (中位数)	v4.0 Beta (中位数)	性能提升倍数
**完整构建**	378ms	100ms	3.78倍
**增量重建 (新增 CSS)**	44ms	5ms	8.8倍
**增量重建 (无新增 CSS)**	35ms	192µs	182倍

この表は、新しい CSS コンテンツを追加しなくても、増分再構築の応答時間がマイクロ秒に達し、開発効率が大幅に向上することを示しています。

主な変更点

新しい純粋な CSS ファーストのアプローチのおかげで、JS カスタマイズの複雑さを掘り下げる必要はなくなりました。

Tailwind CSS v4.0 は、スピード、シンプルさ、ネイティブ CSS 標準とのより深い連携を重視した、強力で将来性のあるアーキテクチャを提供します。 CSS ファーストの構成、ネイティブ カスケード レイヤー、拡張された 3D 変換ユーティリティ、最適化されたグラデーション ワークフローにより、Tailwind CSS はユーティリティ ファーストの設計の限界を押し広げ続けています。

CSS 優先順位の設定

Tailwind CSS v4.0 の画期的な改善点は、CSS 優先順位の設定です。専用の tailwind.config.js を使用する代わりに、開発者は @theme ルールを使用して CSS でデザイン トークンを直接宣言できます:

<code>@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}</code>

ソースコードの自動検出

Tailwind CSS v4.0 では、content 配列を手動で構成する必要性が軽減されます。デフォルトでは、一般的なヒューリスティックに基づいてソース ファイルをスキャンし、.gitignore 内のパスまたはメディア ファイルを自動的に除外します。必要に応じて、次の方法で特定のソースを追加できます:

<code>@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";</code>

組み込みの CSS 翻訳とインポート

v4.0 では、Lightning CSS 統合により、ベンダープレフィックス、機能変換、圧縮がシームレスに処理されます。以前は、開発者は postcss-import または autoprefixer に依存していた可能性がありますが、現在はこれらは必要ありません。

<code>@import "tailwindcss";</code>

--

参考リンク

https://www.php.cn/link/2784c762da784d9adece645ff9e61637
https://www.php.cn/link/7aaca7ed25a9290e1953a69e401d924c
https://www.php.cn/link/b27152e13b5ed9b61478a1384d7b9bf2
https://www.php.cn/link/c07d101913fe4982e90874d6747e4e59

以上がTailwindCSS が終了しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。