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 倍以上。

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

最令人印象深刻的改进是不需要编译任何新 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 的 CSS 文件中配置所有自定义设置，而无需使用 tailwind.config.js 文件，从而减少项目中需要担心的文件。

@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-* 以及更多。

2020 年 3 月 16 日

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>

当 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-punctuation:px-4">
  <!-- ... -->
</div>

.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-* 实用程序 — 使在一个元素上堆叠最多四层盒阴影成为可能。
• 新的 field-sizing 实用程序 — 用于自动调整 textarea 大小，而无需编写单行 JavaScript 代码。
• 新的 color-scheme 实用程序 — 因此您终于可以摆脱暗模式下那些难看的浅色滚动条。
• 新的 font-stretch 实用程序 — 用于仔细调整支持不同宽度的可变字体。
• 新的 inert 变体 — 用于设置标有 inert 属性的非交互式元素的样式。
• 新的 nth-* 变体 — 用于执行您最终会后悔的非常巧妙的操作。
• 新的 in-* 变体 — 这与 group-* 非常相似，但不需要 group 类。
• 支持 :popover-open — 使用现有的 open 变体也定位打开的弹出框。
• 新的 descendant variant — 用于设置所有后代元素的样式，无论好坏。

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

就是这样 — 这就是 Tailwind CSS v4.0。 为了达到这一点，我们已经努力了多年，但我们都为这次发布感到非常自豪，并且迫不及待地想看看您用它构建什么。

查看它，试用它，甚至可以破坏它，并务必让我们知道您的想法。

明天之前请不要提交错误报告 — 至少让我们享受一顿庆祝团队晚餐，也许可以在这家酒店的热水浴缸中放松一下，相信我们真的交付了完美无瑕的软件。