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 Play 中测试它，今天就开始使用 Tailwind CSS v4.0。

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

新的高性能引擎

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，减少了 bug 的表面面积，使框架对我们来说更容易维护。

简化安装

在 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 集成 Tailwind，而不是 PostCSS：

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 文件中的任何内容，以避免扫描那些不在版本控制下的依赖项或生成文件：

/node_modules
/coverage
/.next/
/build

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

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

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

使用像 OKLCH 或 HSL 这样的极性颜色空间可以在 from-* 和 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">检查更新</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 实用程序 - 用于自动调整大小的文本区域，无需编写任何 JavaScript。
• 新的 color-scheme 实用程序 - 让您可以最终摆脱黑暗模式下那些丑陋的浅色滚动条。
• 新的 font-stretch 实用程序 - 用于微调支持不同宽度的可变字体。
• 新的 inert 变种 - 用于为标记为 inert 属性的非交互元素添加样式。
• 新的 nth-* 变种 - 用于做一些您最终会后悔的聪明事情。
• 新的 in-* 变种 - 与 group-* 非常相似，但无需 group 类。
• 对 popover-open 的支持 - 使用现有的 open 变种来定位打开的弹出层。
• 新的 后代变种 - 用于为所有后代元素添加样式，无论好坏。

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

这就是 Tailwind CSS v4.0。 这是多年来努力的成果，我们对这个版本感到非常自豪，迫不及待想看到您用它构建的东西。

查看一下，试用一下，甚至可能会破坏它，肯定要告诉我们您的想法。

只请不要在明天之前提交错误报告 - 让我们至少享受一次庆祝性的团队晚餐，也许在这个酒店的热水浴缸中放松一下，相信我们真的发货了无暇的软件。