Tailwind CSS v4.0

我的天哪，终于完成了 - 我们刚刚为 Tailwind CSS v4.0 打上了标签。

¥Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

Tailwind CSS v4.0 是该框架的全新版本，针对性能和灵活性进行了优化，重新构想了配置和自定义体验，并充分利用了 Web 平台提供的最新技术。

¥Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

新的高性能引擎 — 完整构建速度提升高达 5 倍，增量构建速度提升超过 100 倍，且以微秒为单位。

¥New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
专为现代网络设计 — 基于提示的 CSS 功能构建，例如级联层、使用 @property 和 color-mix() 注册的自定义属性。

¥Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with @property, and color-mix().
简化的安装 — 更少的依赖，零配置，CSS 文件中只需一行代码。

¥Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
第一方 Vite 插件 — 紧密集成，实现最高性能和最低配置。

¥First-party Vite plugin — tight integration for maximum performance and minimum configuration.
自动内容检测 — 所有模板文件均自动发现，无需任何配置。

¥Automatic content detection — all of your template files are discovered automatically, with no configuration required.
内置导入支持 — 无需额外的工具来打包多个 CSS 文件。

¥Built-in import support — no additional tooling necessary to bundle multiple CSS files.
CSS-first 配置 — 一个全新构想的开发者体验，你可以直接使用 CSS 而非 JavaScript 配置文件来自定义和扩展框架。

¥CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
CSS 主题变量 — 所有设计标记都公开为原生 CSS 变量，以便你在任何地方访问它们。

¥CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
动态实用程序值和变体 — 无需再猜测间距比例中的值，也无需再扩展基本数据属性等配置。

¥Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
现代化 P3 调色板 — 一个重新设计的、更加鲜艳的配色方案，充分利用了现代显示技术。

¥Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
容器查询 — 一流的 API，可根据容器大小设置元素样式，无需插件。

¥Container queries — first-class APIs for styling elements based on their container size, no plugins required.
新的 3D 变换实用程序 — 直接在 HTML 中转换 3D 空间中的元素。

¥New 3D transform utilities — transform elements in 3D space directly in your HTML.
扩展的渐变 API — 径向渐变、圆锥渐变、插值模式等等。

¥Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
@starting-style support — 一个可用于创建进入和退出过渡效果的新版本，无需 JavaScript。

¥@starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
非*变体 — 仅当元素与其他变体、自定义选择器、媒体或功能查询不匹配时才为其添加样式。

¥not-* variant — style an element only when it doesn't match another variant, custom selector, or media or feature query.
更多新的实用程序和变体 — 支持 color-scheme、field-sizing、复杂阴影、inert 等。

¥Even more new utilities and variants — including support for color-scheme, field-sizing, complex shadows, inert, and more.

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

¥Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

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

¥For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

新的高性能引擎(New high-performance engine)

¥New high-performance engine

Tailwind CSS v4.0 是对框架的彻底重写，汲取了我们多年来在架构方面积累的所有经验，并对其进行了优化，使其运行速度尽可能快。

¥Tailwind CSS v4.0 is a ground-up rewrite of the framework, taking everything we've learned about the architecture over the years and optimizing it to be as fast as possible.

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

¥When benchmarking it on our own projects, we've found full rebuilds to be over 3.5x faster, and incremental builds to be over 8x faster.

以下是我们在对 Tailwind CSS v4.0 进行基准测试时看到的构建时间中位数与 Catalyst 的比较结果：

¥Here are the median build times we saw when we benchmarked Tailwind CSS v4.0 against Catalyst:

	v3.4	v4.0	Improvement
Full build	378ms	100ms	3.78x
Incremental rebuild with new CSS	44ms	5ms	8.8x
Incremental rebuild with no new CSS	35ms	192µs	182x

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

¥The most impressive improvement is on incremental builds that don't actually need to compile any new CSS — these builds are over 100x faster and complete in microseconds. And the longer you work on a project, the more of these builds you run into because you're just using classes you've already used before, like flex, col-span-2, or font-bold.

专为现代网络设计(Designed for the modern web)

¥Designed for the modern web

自我们发布 Tailwind CSS v3.0 以来，平台已经取得了长足的进步，而 v4.0 充分利用了其中的许多改进。

¥The platform has evolved a lot since we released Tailwind CSS v3.0, and v4.0 takes full advantage of many of these improvements.

CSS

@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 功能：

¥We're leveraging modern CSS features like:

原生级联层 - 让我们比以往任何时候都更能控制不同样式规则之间的交互。

¥Native cascade layers — giving us more control than ever over how different style rules interact with each other.
注册自定义属性 - 可以实现诸如动画渐变之类的功能，并显著提升大页面的性能。

¥Registered custom properties — making it possible to do things like animate gradients, and significantly improving performance on large pages.
color-mix() - 它允许我们调整任何颜色值的不透明度，包括 CSS 变量和 currentColor。

¥color-mix() — which lets us adjust the opacity of any color value, including CSS variables and currentColor.
逻辑属性 - 简化 RTL 支持并减小生成的 CSS 的大小。

¥Logical properties — simplifying RTL support and reducing the size of your generated CSS.

许多这些功能甚至简化了 Tailwind 的内部结构，减少了 bug 的暴露面，使框架更易于维护。

¥Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to maintain.

简化的安装(Simplified installation)

¥Simplified installation

在 v4.0 中，我们极大地简化了设置流程，减少了步骤并删除了大量样板代码。

¥We've streamlined the setup process a ton in v4.0, reducing the number of steps and removing a lot of boilerplate.

1. Install Tailwind CSS

npm i tailwindcss @tailwindcss/postcss;

2. Add the PostCSS plugin

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

3. Import Tailwind in your CSS

@import "tailwindcss";

随着我们在 v4.0 中对此流程的改进，Tailwind 感觉比以往任何时候都更加轻量：

¥With the improvements we've made to this process for v4.0, Tailwind feels more light-weight than ever:

只需一行 CSS - 不再需要 @tailwind 指令，只需添加 @import "tailwindcss" 即可开始构建。

¥Just one-line of CSS — no more @tailwind directives, just add @import "tailwindcss" and start building.
零配置 - 你无需配置任何内容即可开始使用框架，甚至无需更改模板文件的路径。

¥Zero configuration — you can start using the framework without configuring anything, not even the paths to your template files.
无需外部插件 - 我们为你打包了开箱即用的 @import 规则，并在底层使用 Lightning CSS 进行供应商前缀和现代语法转换。

¥No external plugins required — we bundle @import rules for you out of the box, and use Lightning CSS under the hood for vendor prefixing and modern syntax transforms.

当然，每个项目只需执行一次此操作，但当你每个周末开始并放弃不同的副项目时，它会累积起来。

¥Sure you only go through this once per project, but it adds up when you're starting and abandoning a different side-project every weekend.

第一方 Vite 插件(First-party Vite plugin)

¥First-party Vite plugin

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

¥If you're a Vite user, you can now integrate Tailwind using @tailwindcss/vite instead of 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 v4.0 is incredibly fast when used as a PostCSS plugin, but you'll get even better performance using the Vite plugin.

自动内容检测(Automatic content detection)

¥Automatic content detection

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

¥You know how you always had to configure that annoying content array in Tailwind CSS v3? In v4.0, we came up with a bunch of heuristics for detecting all of that stuff automatically so you don’t have to configure it at all.

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

¥For example, we automatically ignore anything in your .gitignore file to avoid scanning dependencies or generated files that aren’t under version control:

.gitignore

/node_modules
/coverage
/.next/
/build

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

¥We also automatically ignore all binary extensions like images, videos, .zip files, and more.

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

¥And if you ever need to explicitly add a source that's excluded by default, you can always add it with the @source directive, right in your CSS file:

CSS

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

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

¥The @source directive uses the same heuristics under the hood, so it will exclude binary file types for example as well, without you having to specify all of the extensions to scan explicitly.

了解更多关于检测源文件中的类的新文档。

¥Learn more about in our new documentation on detecting classes in source files.

内置导入支持(Built-in import support)

¥Built-in import support

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

¥Before v4.0, if you wanted to inline other CSS files using @import you'd have to configure another plugin like postcss-import to handle it for you.

现在我们开箱即用，无需任何其他工具：

¥Now we handle this out of the box, so you don't need any other tools:

postcss.config.js

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

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

¥Our import system is purpose-built for Tailwind CSS, so we've also been able to make it even faster by tightly integrating it with our engine.

CSS-first 配置(CSS-first configuration)

¥CSS-first configuration

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

¥One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.

无需使用 tailwind.config.js 文件，你可以直接在导入 Tailwind 的 CSS 文件中配置所有自定义设置，从而减少项目中需要担心的文件数量：

¥Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:

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 文件中可以执行的操作，包括配置设计标记、定义自定义实用程序和变体等等。

¥The new CSS-first configuration lets you do just about everything you could do in your tailwind.config.js file, including configuring your design tokens, defining custom utilities and variants, and more.

要了解有关其工作原理的更多信息，请阅读新的主题变量文档。

¥To learn more about how it all works, read the new theme variables documentation.

CSS 主题变量(CSS theme variables)

¥CSS theme variables

Tailwind CSS v4.0 会获取所有设计令牌，并默认将其作为 CSS 变量提供，因此你只需使用 CSS 即可在运行时引用任何所需的值。

¥Tailwind CSS v4.0 takes all of your design tokens and makes them available as CSS variables by default, so you can reference any value you need at run-time using just CSS.

使用之前的示例 @theme，所有这些值都将作为常规自定义属性添加到你的 CSS 中：

¥Using the example @theme from earlier, all of these values will be added to your CSS to as regular custom properties:

Generated 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);
  /* ... */
}

这样可以轻松地将这些值重用为内联样式，或将它们传递给运动等库来为其添加动画效果。

¥This makes it easy to reuse these values as inline styles or pass them to libraries like Motion to animate them.

动态实用程序值和变体(Dynamic utility values and variants)

¥Dynamic utility values and variants

在 v4.0 中，我们简化了许多实用程序和变体的工作方式，允许它们有效地接受某些类型的任意值，而无需任何配置或降级到任意值语法。

¥We've simplified the way many utilities and variants work in v4.0 by effectively allowing them to accept certain types of arbitrary values, without the need for any configuration or dropping down to the arbitrary value syntax.

例如，在 Tailwind CSS v4.0 中，你可以创建任意大小的开箱即用网格：

¥For example, in Tailwind CSS v4.0 you can create grids of any size out of the box:

HTML

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

你还可以定位自定义布尔数据属性，而无需定义它们：

¥You can also target custom boolean data attributes without needing to define them:

HTML

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

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

¥Even spacing utilities like px-*, mt-*, w-*, h-*, and more are now dynamically derived from a single spacing scale variable and accept any value out of the box:

Generated 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 一起发布的升级工具，如果注意到你使用了不再需要的任意值，它甚至会自动为你简化大部分这些实用程序。

¥The upgrade tool we released alongside v4.0 will even simplify most of these utilities for you automatically if it notices you using an arbitrary value that's no longer needed.

现代化 P3 调色板(Modernized P3 color palette)

¥Modernized P3 color palette

我们将整个默认调色板从 rgb 升级到了 oklch，利用更宽的色域，使之前受 sRGB 色彩空间限制的色彩更加鲜艳。

¥We've upgraded the entire default color palette from rgb to oklch, taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space.

我们尽量保持所有颜色之间的平衡与 v3 版本相同，因此即使我们全面更新了所有功能，在升级现有项目时也不会感觉有什么太大的变化。

¥We've tried to keep the balance between all the colors the same as it was in v3, so even though we've refreshed things across the board, it shouldn't feel like a breaking change when upgrading your existing projects.

容器查询(Container queries)

¥Container queries

我们已将容器查询支持引入 v4.0 的核心，因此你不再需要 @tailwindcss/container-queries 插件：

¥We've brought container query support into core for v4.0, so you don't need the @tailwindcss/container-queries plugin anymore:

HTML

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

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

¥We've also added support for max-width container queries using the new @max-* variant:

HTML

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

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

¥Like our regular breakpoint variants, you can also stack @min-* and @max-* variants to define container query ranges:

HTML

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

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

¥Learn more in our all-new container queries documentation.

新的 3D 变换实用程序(New 3D transform utilities)

¥New 3D transform utilities

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

¥We've finally added APIs for doing 3D transforms, like rotate-x-*, rotate-y-*, scale-z-*, translate-z-*, and tons more.

查看更新后的 transform-style、rotate、perspective 和 perspective-origin 文档以开始使用。

¥Check out the updated transform-style, rotate, perspective, and perspective-origin documentation to get started.

扩展的渐变 API(Expanded gradient APIs)

¥Expanded gradient APIs

我们在 v4.0，让你无需编写任何自定义 CSS 即可实现更炫酷的效果。

¥We've added a ton of new gradient features in v4.0, so you can pull off even fancier effects without having to write any custom CSS.

线性渐变角度(Linear gradient angles)

¥Linear gradient angles

线性渐变现在支持角度作为值，因此你可以使用 bg-linear-45 等实用程序创建 45 度角的渐变：

¥Linear gradients now support angles as values, so you can use utilities like bg-linear-45 to create a gradient on a 45 degree angle:

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

你可能注意到我们也将 bg-gradient-* 重命名为 bg-linear-* 了 - 你很快就会明白原因！

¥You may notice we've renamed bg-gradient-* to bg-linear-* too — you'll see why shortly!

渐变插值修饰符(Gradient interpolation modifiers)

¥Gradient interpolation modifiers

我们添加了使用修饰符控制渐变颜色插值模式的功能，因此像 bg-linear-to-r/srgb 这样的类使用 sRGB 进行插值，而 bg-linear-to-r/oklch 则使用 OKLCH 进行插值：

¥We've added the ability to control the color interpolation mode for gradients using a modifier, so a class like bg-linear-to-r/srgb interpolates using sRGB, and bg-linear-to-r/oklch interpolates using 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，但你可以随时通过添加以下修饰符之一来使用不同的颜色空间进行插值。

¥Using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the from-* and to-* colors are far apart on the color wheel. We're using OKLAB by default in v4.0 but you can always interpolate using a different color space by adding one of these modifiers.

圆锥渐变和径向渐变(Conic and radial gradients)

¥Conic and radial gradients

我们添加了新的 bg-conic-* 和 bg-radial-* 实用程序，用于创建圆锥渐变和径向渐变：

¥We've added new bg-conic-* and bg-radial-* utilities for creating conic and radial gradients:

<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-* 实用程序协同工作，让你可以像创建线性渐变一样创建圆锥渐变和径向渐变，并包含用于设置颜色插值方法的修饰符和用于控制渐变位置等细节的任意值支持。

¥These new utilities work alongside the existing from-*, via-*, and to-* utilities to let you create conic and radial gradients the same way you create linear gradients, and include modifiers for setting the color interpolation method and arbitrary value support for controlling details like the gradient position.

@starting-style support

新的 starting 变体增加了对新的 CSS @starting-style 功能的支持，使得在元素首次显示时转换元素属性成为可能：

¥The new starting variant adds support for the new CSS @starting-style feature, making it possible to transition element properties when an element is first displayed:

<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。对于大多数团队来说，浏览器支持可能还没有完全实现，但我们正在接近目标！

¥With @starting-style, you can finally animate elements as they appear on the page without the need for any JavaScript at all. Browser support probably isn't quite there yet for most teams, but we're getting close!

非变体(not- variant)

¥not-* variant

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

¥We've added a new not-* variant which finally adds support for the CSS :not() pseudo-class:

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 查询：

¥It does double duty and also lets you negate media queries and @supports queries:

HTML

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

CSS

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

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

¥Check out the new not-* documentation to learn more.