Tailwind CSS v4.0

我的天啊，它真的完成了——我们刚刚标记了 Tailwind CSS v4.0。

Tailwind CSS v4.0 是一个全新的框架版本，它针对性能和灵活性进行了优化，具有重新设计的配置和自定义体验，并充分利用了 Web 平台提供的最新进展。

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

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

对于现有项目，我们发布了全面的升级指南，并构建了自动升级工具，以使您能够尽快且无痛地升级到最新版本。

新的高性能引擎

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

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

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

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

为现代 Web 设计

自我们发布 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 中简化了设置过程，减少了步骤并删除了许多样板文件。

npm i tailwindcss @tailwindcss/postcss;

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

@import "tailwindcss";

通过我们为 v4.0 进行的改进，Tailwind 感觉比以往更轻量：

• 只需一行 CSS — 不再需要 @tailwind 指令，只需添加 @import "tailwindcss" 并开始构建。
• 零配置 — 您可以在不配置任何内容的情况下开始使用框架，甚至不需要配置模板文件的路径。
• 无需外部插件 — 我们为您开箱即用地捆绑了 @import 规则，并在引擎下使用 Lightning CSS 进行供应商前缀和现代语法转换。

当然，您每个项目只需执行一次此操作，但当您每个周末都在启动和放弃不同的副项目时，这会累积起来。

第一方 Vite 插件

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

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

当作为 PostCSS 插件使用时，Tailwind CSS v4.0 的速度非常快，但使用 Vite 插件时，性能会更好。

自动内容检测

您知道在 Tailwind CSS v3 中总是需要配置那个烦人的 content 数组吗？在 v4.0 中，我们想出了一堆启发式方法来自动检测所有这些内容，因此您无需进行任何配置。

例如，我们会自动忽略 .gitignore 文件中的任何内容，以避免扫描不受版本控制的依赖项或生成的文件：

/node_modules/coverage/.next//build

我们还会自动忽略所有二进制扩展名，例如图像、视频、.zip 文件等。

如果您需要显式添加默认情况下排除的源，您可以始终使用 @source 指令直接在 CSS 文件中添加它：

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

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

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

内置导入支持

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

现在我们开箱即用地处理这个问题，因此您不需要任何其他工具：

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

我们的导入系统是为 Tailwind CSS 专门构建的，因此我们还能够通过与引擎紧密集成使其更快。

CSS 优先配置

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

不再需要 tailwind.config.js 文件，您可以直接在导入 Tailwind 的 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 中：

: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 中，您可以开箱即用地创建任意大小的网格：

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

您还可以在不需要定义它们的情况下定位自定义布尔数据属性：

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

即使是 px-*、mt-*、w-*、h-* 等间距实用程序现在也从单个间距比例变量中动态派生，并开箱即用地接受任何值：

@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 插件：

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

我们还添加了对使用新 @max-* 变体的最大宽度容器查询的支持：

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

与我们的常规断点变体一样，您还可以堆叠 @min-* 和 @max-* 变体以定义容器查询范围：

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

在我们的全新容器查询文档中了解更多信息。

新的 3D 转换实用程序

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

Mar 16, 2020

Michael Foster

Boost your conversion rate

<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>

当 from-* 和 to-* 颜色在色轮上相距较远时，使用 OKLCH 或 HSL 等极性颜色空间可以导致更生动的渐变。我们在 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-* 变体

我们添加了一个新的 not-* 变体，它终于增加了对 CSS :not() 伪类的支持：

<div class="not-hover:opacity-75">  <!-- ... --></div>

.not-hover\:opacity-75:not(*:hover) {  opacity: 75%;}@media not (hover: hover) {  .not-hover\:opacity-75 {    opacity: 75%;  }}

它还可以双重工作，让您否定媒体查询和 @supports 查询：

<div class="not-supports-hanging-punctation:px-4">  <!-- ... --></div>

.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。 多年来的努力终于达到了这一点，但我们都对这个版本感到非常自豪，我们迫不及待地想看看您用它构建了什么。

检查它，玩弄它，甚至可能破坏它，并且一定要告诉我们您的想法。

只是请不要在明天之前报告错误——至少让我们享受一次庆祝团队晚餐，也许在这家酒店的热水浴缸里放松一下，相信我们真的发布了无瑕疵的软件。