Tailwind CSS v4.0 发布

Holy shit it's actually done ！

1 月 22 日，Tailwind CSS 正式发布了 4.0 版本，针对性能和灵活性进行了优化，重新构想了配置和定制体验，并充分利用了 Web 平台提供的最新进展。

• 新的高性能引擎- 完整构建速度提高 5 倍，增量构建速度提高 100 倍以上 - 以微秒为单位。
  • 专为现代网络而设计@property— 基于诸如级联层、使用、注册的自定义属性等尖端 CSS 功能构建color-mix()。
  • 简化安装- 更少的依赖项、零配置，并且只需 CSS 文件中的一行代码。
  • 第一方 Vite 插件——紧密集成，实现最高性能和最低配置。
  • 自动内容检测——您的所有模板文件都会被自动发现，无需配置。
  • 内置导入支持——无需额外的工具即可捆绑多个 CSS 文件。
  • CSS 优先配置——重新构想的开发人员体验，您可以直接在 CSS 中自定义和扩展框架，而不是使用 JavaScript 配置文件。
  • CSS 主题变量——所有设计令牌都公开为原生 CSS 变量，因此您可以在任何地方访问它们。
  • 动态效用值和变体——停止猜测间距尺度中存在什么值，或者扩展诸如基本数据属性之类的配置。
  • 现代化的 P3 调色板——重新设计的、更生动的调色板，充分利用了现代显示技术。
  • 容器查询——根据容器大小对元素进行样式设置的一流 API，无需插件。
  • 新的 3D 变换实用程序— 直接在 HTML 中变换 3D 空间中的元素。
  • 扩展渐变 API — 径向和圆锥渐变、插值模式等。
  • @starting-style 支持——您可以使用此新变体来创建进入和退出转换，而无需 JavaScript。
  • not-* variant — 仅当元素与另一个变体、自定义选择器或媒体或功能查询不匹配时才设置元素样式。
  • 更多新实用程序和变体color-scheme— 包括对、、field-sizing复杂阴影inert等的支持。

立即开始使用 Tailwind CSS v4.0，将其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在Tailwind Play上的浏览​​器中使用它。

对于现有项目，我们发布了全面的升级指南并构建了自动升级工具，以便您尽快、轻松地获得最新版本。

---

新型高性能引擎

Tailwind CSS v4.0 是对该框架的彻底重写，它吸收了我们多年来对架构的所有了解，并对其进行了优化，使其尽可能快。

当我们对自己的项目进行基准测试时，我们发现完全重建速度提高了 3.5 倍以上，增量构建速度提高了 8 倍以上。

以下是我们对 Tailwind CSS v4.0 与Catalyst进行基准测试时看到的平均构建时间：

	v3.4	4.0版	改进
完整构建	378毫秒	100毫秒	3.78x
使用新 CSS 进行增量重建	44毫秒	5毫秒	8.8x
无需新 CSS 的增量重建	35毫秒	192微秒	182x

最令人印象深刻的改进是增量构建，实际上不需要编译任何新的 CSS — 这些构建速度快 100 倍以上，并在几微秒内完成。而且你在项目上工作的时间越长，你遇到的这些构建就越多，因为你只是使用以前已经使用过的类，例如flex、col-span-2或font-bold。

---

专为现代网络而设计

自我们发布 Tailwind CSS v3.0 以来，平台已经有了很大的发展，而 v4.0 充分利用了其中的许多改进。

@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 — 无需更多@tailwind指令，只需添加@import "tailwindcss"并开始构建。
  • 零配置——您可以开始使用框架而无需配置任何内容，甚至不需要配置模板文件的路径。
  • 无需外部插件- 我们@import为您捆绑开箱即用的规则，并在后台使用Lightning CSS进行供应商前缀和现代语法转换。

当然，每个项目你只需要经历一次这样的过程，但是当你每个周末开始和放弃不同的副项目时，这个过程就会累积起来。

第一方 Vite 插件

如果您是 Vite 用户，现在可以使用 Tailwind@tailwindcss/vite而不是 PostCSS 来集成：

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 文件等。

如果您需要明确添加默认排除的源，您可以随时使用@source指令在 CSS 文件中将其添加：

CSS

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

该@source指令在底层使用相同的启发式方法，因此它也会排除二进制文件类型，而无需您指定要明确扫描的所有扩展名。

在我们的新文档中了解有关在源文件中检测类的更多信息。

---

内置导入支持

在 v4.0 之前，如果您想内联其他 CSS 文件，@import您必须配置另一个插件来postcss-import为您处理它。

现在我们可以立即处理这个问题，所以您不需要任何其他工具：

postcss.config.js

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

我们的导入系统是专为 Tailwind CSS 构建的，因此我们还可以通过将其与我们的引擎紧密集成使其运行得更快。

---

CSS 优先配置

Tailwind CSS v4.0 中最大的变化之一是从使用 JavaScript 配置项目转变为使用 CSS 配置项目。

您无需使用tailwind.config.js文件，而是可以直接在导入 Tailwind 的 CSS 文件中配置所有自定义项，这样就少了一个需要担心的项目文件：

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-first 配置允许您执行文件中几乎所有可以执行的操作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 变换实用程序

我们最终添加了用于进行 3D 转换的 API，例如、、、rotate-x-*等等。rotate-y-*scale-z-*translate-z-*

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

查看更新的、、transform-style和文档以开始使用。rotateperspectiveperspective-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>

from-*当色轮上的和 颜色相距较远时，使用 OKLCH 或 HSL 等极地色彩空间可以产生更加生动的渐变to-*。我们在 v4.0 中默认使用 OKLAB，但您始终可以通过添加其中一个修饰符来使用不同的色彩空间进行插值。

圆锥渐变和径向渐变

我们添加了用于创建圆锥渐变和径向渐变的新实用程序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-*变体，最终增加了对 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-punctation:px-4"><!-- ... -->
</div>

CSS

.not-supports-hanging-punctation\:px-4 {@supports not (hanging-punctation: var(--tw)) {padding-inline: calc(var(--spacing) * 4);}
}

查看新not-*文档以了解更多信息。

---

更多新实用程序和变体

我们还在 v4.0 中添加了大量其他新实用程序和变体，包括：

• 新功能 inset-shadow-*和inset-ring-*实用程序——可以在单个元素上堆叠最多四层框阴影。
  • 新的 field-sizing实用程序——无需编写一行 JavaScript 即可自动调整文本区域的大小。
  • 新的 color-scheme实用程序——这样你最终就可以摆脱黑暗模式下那些丑陋的浅色滚动条。
  • 新的 font-stretch实用程序——用于仔细调整支持不同宽度的可变字体。
  • 新的 inert变体——用于设置标有属性的非交互式元素的样式inert。
  • 新的 nth-*变种——做一些你最终会后悔的聪明事情。
  • 新的 in-*变体— 与 非常相似group-*，但不需要类group。
  • 支持 :popover-open——使用现有open变体来定位打开的弹出窗口。
  • 新的 后代变体— 用于设计所有后代元素的样式，无论是好是坏。

查看所有这些功能的相关文档以了解更多信息。

---

相关文档

Tailwind CSS v4.0 - Tailwind CSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.