开源 Tailwind CSS v4.0 的进展

去年夏天，在 Tailwind Connect 我分享了一个预览 Oxide 上，我们一直在开发一个全新的高性能 Tailwind CSS 引擎，旨在简化开发者体验，并充分利用 Web 平台近年来的发展。

¥Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we've been working on, designed to simplify the developer experience and take advantage of how the web platform has evolved in recent years.

新引擎最初计划以 v3.x 版本发布，但即使我们致力于向后兼容，它仍然感觉像是框架的新一代版本，因此它理应是 v4.0。

¥The new engine was originally going to ship as a v3.x release, but even though we're committed to backwards compatibility, this feels so clearly like a new generation of the framework that it deserves to be v4.0.

现在还为时过早，我们已经有了还有很多工作要做要做，但今天我们已经是开源我们的进度了，并且正在为第一个公开的 v4.0.0-alpha 打标签，以便你可以开始尝试它，并帮助我们在今年晚些时候发布稳定版本。

¥It's still early and we've got a lot of work to do, but today we're open-sourcing our progress and tagging the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.

我会尽量简短地介绍，以便大家对稳定版的兴奋之情能有所保留。但如果你也喜欢尝试一些早期的实验性功能，这里应该有很多信息可以帮助你入门。

¥I'll try keep it brief to save some of the excitement for the stable release, but if you like to play with very early and experimental stuff, there should be plenty of information here to get you going.

全新引擎，速度至上(A new engine, built for speed)

¥A new engine, built for speed

新引擎是彻底重写的，运用我们目前对框架的所有了解来更好地建模问题空间，从而用更少的代码实现更快的运行速度。

¥The new engine is a ground-up rewrite, using everything we know about the framework now to better model the problem space, making things faster with a lot less code.

速度提升高达 10 倍 - 我们可以在 105 毫秒内（而非 960 毫秒）完成 Tailwind CSS 网站的完整构建，或者在 55 毫秒内（而非 341 毫秒）完成 Catalyst UI 套件的完整构建。

¥Up to 10x faster — we can do a full build of the Tailwind CSS website in 105ms instead of 960ms, or our Catalyst UI kit in 55ms instead of 341ms.
更小的占用空间 - 即使使用了我们发布的更重的原生软件包（例如用 Rust 和 Lightning CSS 重写的部分），新引擎的安装体积也缩小了 35% 以上。

¥Smaller footprint — the new engine is over 35% smaller installed, even with the heavier native packages we ship like the parts we've rewritten in Rust and Lightning CSS.
Rust 至关重要 - 我们已将框架中一些最昂贵且可并行化的部分迁移到 Rust，同时保留框架核心的 TypeScript 以实现可扩展性。

¥Rust where it counts — we've migrated some of the most expensive and parallelizable parts of the framework to Rust, while keeping the core of the framework in TypeScript for extensibility.
一个依赖 - 新引擎唯一依赖的是 Lightning CSS。

¥One dependency — the only thing the new engine depends on is Lightning CSS.
自定义解析器 - 我们编写了自己的 CSS 解析器，并根据需求设计了自己的数据结构，使解析速度比使用 PostCSS 快了 2 倍多。

¥Custom parser — we wrote our own CSS parser and designed our own data structures tailored to our needs, making parsing over 2x as fast for us as it was with PostCSS.

统一工具链(Unified toolchain)

¥Unified toolchain

Tailwind CSS v4 不再只是一个插件 - 它是一个用于处理 CSS 的一体化工具。我们已将 Lightning CSS 直接集成到框架中，因此你无需对 CSS 管道进行任何配置。

¥Tailwind CSS v4 isn't just a plugin anymore — it's an all-in-one tool for processing your CSS. We've integrated Lightning CSS directly into the framework so you don't have to configure anything about your CSS pipeline.

内置 @import 处理 - 无需设置和配置像 postcss-import 这样的工具。

¥Built-in @import handling — no need to setup and configure a tool like postcss-import.
内置供应商前缀 - 你无需再将 autoprefixer 添加到项目中。

¥Built-in vendor prefixing — you don't have to add autoprefixer to your projects anymore.
内置嵌套支持 - 无需插件即可展平嵌套 CSS，开箱即用。

¥Built-in nesting support — no plugins needed to flatten nested CSS, it works out of the box.
语法转换 - 现代 CSS 功能（例如 oklch() 颜色和媒体查询范围）已转换为具有更好浏览器支持的语法。

¥Syntax transforms — modern CSS features like oklch() colors and media query ranges are transpiled to syntax with better browser support.

我们也在探索第一方打包插件，并且我们将在第一个 Alpha 版本中发布一个官方 Vite 插件，你今天就可以试用。

¥We're still shipping a PostCSS plugin, but we're also exploring first-party bundler plugins, and we're shipping an official Vite plugin with this first alpha release that you can try out today.

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

¥Designed for the modern web

我们着眼于 Tailwind CSS v4 的未来，并致力于构建一个在未来几年内始终保持前沿的框架。

¥We're looking into the future with Tailwind CSS v4 and trying to build a framework that's going to feel cutting edge for years to come.

原生级联层 - 我们现在使用真正的 @layer 规则，这解决了我们过去遇到的大量特异性问题。

¥Native cascade layers — we're using real @layer rules now, which solves a ton of specificity problems we've wrestled with in the past.
显式定义的自定义属性 - 我们使用 @property 定义具有适当类型和约束的内部自定义属性，从而可以实现诸如过渡背景渐变之类的功能。

¥Explicitly defined custom properties — we use @property to define our internal custom properties with proper types and constraints, making it possible to do things like transition background gradients.
使用 color-mix 作为不透明度修饰符 - 在使用 CSS 变量设置颜色，甚至调整 currentColor 的不透明度时，使用我们的不透明度修饰符语法比以往任何时候都更容易。

¥Using color-mix for opacity modifiers — making it easier than ever to use our opacity modifier syntax when using CSS variables for colors, or even adjusting the opacity of currentColor.
核心中的容器查询 - 我们已将对容器查询的支持直接添加到核心中，新的 @min-* 和 @max-* 变体支持容器查询范围。

¥Container queries in core — we've added support for container queries directly to core, with new @min-* and @max-* variants to support container query ranges.

我们还在努力使用广色域颜色刷新我们的调色板，并引入对其他现代 CSS 功能（如 @starting-style、锚点定位等）的支持。

¥We're also working on refreshing our color palette with wide gamut colors, and introducing support for other modern CSS features like @starting-style, anchor positioning, and more.

可组合变体(Composable variants)

¥Composable variants

新的架构使得可以组合作用于其他选择器的变体，例如 group-*、peer-*、has-* 以及我们在 v4 中引入的新 not-* 变体。

¥The new architecture makes it possible to compose together variants that act on other selectors, like group-*, peer-*, has-*, and a new not-* variant we're introducing for v4.

在早期版本中，像 group-has-* 这样的变体在框架中是明确定义的，但现在 group-* 可以与现有的 has-* 变体组合，而后者又可以与 focus 等其他变体组合：

¥In earlier releases, variants like group-has-* were explicitly defined in the framework, but now group-* can compose with the existing has-* variant, which can compose with other variants like focus:

index.html

<div class="group">
  <div class="group-has-[&:focus]:opacity-100">
  <div class="group-has-focus:opacity-100">
      <!-- ... -->
    </div>
  </div>
</div>

这种可组合性没有任何限制，如果出于某些原因你需要这样做，你甚至可以编写像 group-not-has-peer-not-data-active:underline 这样的东西。

¥There's no limits to this composability, and you can even write stuff like group-not-has-peer-not-data-active:underline if for some horrible reason that's what you need to do.

零配置内容检测(Zero-configuration content detection)

¥Zero-configuration content detection

你会注意到，至少在这些早期的 alpha 版本中，甚至无法配置你的 content 路径。对于大多数项目来说，你永远不需要再这样做了 - Tailwind 会帮你找到模板文件。

¥You'll notice that at least in these early alpha releases, it's not even possible to configure your content paths. For most projects, you're never going to need to do this ever again — Tailwind just finds your template files for you.

我们会根据你如何将 Tailwind 集成到项目中，使用以下两种方法之一：

¥We do this using one of two ways depending on how you've integrated Tailwind into your project:

使用 PostCSS 插件或 CLI，Tailwind 将抓取你的整个项目以查找模板文件，并使用我们内置的一系列启发式算法来保持快速运行，例如不抓取 .gitignore 文件中的目录，并忽略二进制文件格式。

¥Using the PostCSS plugin or the CLI, Tailwind will crawl your entire project looking for template files, using a bunch of heuristics we've built in to keep things fast, like not crawling directories that are in your .gitignore file, and ignoring binary file formats.
使用 Vite 插件时，我们依赖模块图。这太棒了，因为我们确切地知道你实际使用的文件，因此它能够最大限度地提高性能，并且不会出现误报或漏报。我们希望未来能通过其他打包插件，将这种方法扩展到 Vite 生态系统之外。

¥Using the Vite plugin, we rely on the module graph. This is amazing because we know exactly what files you're actually using, so it's maximally performant, and with no false positives or negatives. We're hoping to expand this approach outside of the Vite ecosystem with other bundler plugins in the future.

我们肯定会在未来引入一种明确配置内容路径的方法，但我们很想知道这种自动化方法对每个人的效果如何 - 它在我们自己的项目中效果非常好。

¥We'll introduce a way to configure content paths explicitly in the future for sure, but we're curious to see how well this automatic approach works for everyone — it's working awesome in our own projects.

CSS-first 配置(CSS-first configuration)

¥CSS-first configuration

Tailwind CSS v4.0 的一个主要目标是让框架感觉像 CSS 原生，而不是 JavaScript 库。

¥A major goal of Tailwind CSS v4.0 is making the framework feel CSS-native, and less like a JavaScript library.

安装完成后，你可以使用常规的 CSS @import 语句将其添加到项目中：

¥Once you've installed it, you add it to your project with a regular CSS @import statement:

main.css

@import "tailwindcss";

你无需在 JavaScript 配置文件中设置所有自定义设置，只需使用 CSS 变量即可：

¥And instead of setting up all of your customizations in a JavaScript configuration file, you just use CSS variables:

main.css

@import "tailwindcss";
@theme {
  --font-family-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

特殊的 @theme 指令告诉 Tailwind 根据这些变量提供新的实用程序和变体，让你在标记中使用像 3xl:text-neon-lime 这样的类：

¥The special @theme directive tells Tailwind to make new utilities and variants available based on those variables, letting you use classes like 3xl:text-neon-lime in your markup:

index.html

<div class="max-w-lg 3xl:max-w-xl">
  <h1 class="font-display text-4xl">
    Data to <span class="text-neon-cyan">enrich</span> your online business
  </h1>
</div>

添加新的 CSS 变量的行为与 extend 在早期版本框架中的行为类似，但你可以在定义所有自定义值之前，使用类似 --color-*: initial 的语法清除命名空间，从而覆盖一整套变量：

¥Adding new CSS variables behaves like extend did in earlier versions of the framework, but you can override a whole set of variables by clearing the namespace with syntax like --color-*: initial before defining all of your custom values:

main.css

@import "tailwindcss";
@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

我们仍在对一些命名规范进行微调，但你可以通过在 GitHub 上探索默认主题查看哪些内容可以自定义。

¥We're still fine-tuning some of the naming conventions, but you can explore the default theme on GitHub to see what's available to customize.

如果你不想明确清除默认主题，而希望从头开始，你可以直接导入 "tailwindcss/preflight" 和 "tailwindcss/utilities" 以跳过导入默认主题的步骤：

¥If you don't want to explicitly clear the default theme and would rather start from scratch, you can import "tailwindcss/preflight" and "tailwindcss/utilities" directly to skip importing the default theme:

main.css

@import "tailwindcss";
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);
@theme {
  --color-*: initial; 
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

我们还将所有主题值作为原生 CSS 变量在你的自定义 CSS 中提供：

¥We also make all of your theme values available as native CSS variables in your custom CSS:

dist/main.css

:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

这样可以轻松地在任意值中引用任何主题值，而无需使用 theme() 函数：

¥This makes it easy to reference any of your theme values in arbitrary values without needing the theme() function:

index.html

<div class="p-[calc(var(--spacing-6)-1px)]">
  <!-- ... -->
</div>

它还可以在使用 Framer Motion 等 UI 库时使用主题值，而无需使用 resolveConfig() 函数：

¥It also makes it possible to use your theme values when working with UI libraries like Framer Motion, without having to use the resolveConfig() function:

JSX

import { motion } from "framer-motion";
export const MyComponent = () => (
  <motion.div initial={{ y: "var(--spacing-8)" }} animate={{ y: 0 }} exit={{ y: "var(--spacing-8)" }}>
    {children}
  </motion.div>
);

有哪些变化(What's changed)

¥What's changed

我们不会轻易接受重大变更，但目前为止，我们在 v4 中做了一些不同的事情，值得分享：

¥We don't take breaking changes lightly, but there are a few things we're doing differently in v4 so far that are worth sharing:

移除了已弃用的实用程序 - 我们移除了很久以前停止记录的实用程序，例如 text-opacity-*、flex-grow-* 和 decoration-slice，并代之以它们的现代替代品，例如 text-{color}/*、grow-* 和 box-decoration-slice。

¥Removed deprecated utilities — we've removed utilities we stopped documenting a long time ago like text-opacity-*, flex-grow-*, and decoration-slice in favor of their modern replacements like text-{color}/*, grow-*, and box-decoration-slice.
PostCSS 插件和 CLI 是独立的软件包 - 主 tailwindcss 软件包不再包含它们，因为并非每个人都需要它们，而是需要使用 @tailwindcss/postcss 和 @tailwindcss/cli 单独安装。

¥PostCSS plugin and CLI are separate packages — the main tailwindcss package doesn't include these anymore since not everyone needs them, instead they should be installed separately using @tailwindcss/postcss and @tailwindcss/cli.
没有默认边框颜色 - border 实用程序以前默认为 gray-200，但现在它像浏览器一样默认为 currentColor。如果你使用 zinc、slate 或其他颜色作为主灰色，我们进行此更改是为了防止意外将错误的灰色引入你的项目。

¥No default border color — the border utility used to default to gray-200, but now it defaults to currentColor like the browser does. We made this change to make it harder to accidentally introduce a wrong gray into your project if you're using zinc or slate or something else as your main gray.
默认情况下，圆环为 1px - ring 实用程序以前默认为 3px 蓝色圆环，现在使用 currentColor 时变为 1px 圆环。我们发现在我们的项目中，ring-* 实用程序会替代边框，而 outline-* 会用于焦点环，因此我们认为保持一致性是一个有益的改变。

¥Rings are 1px by default — the ring utility used to be a 3px blue ring by default, now it's a 1px ring using currentColor. We find ourselves using the ring-* utilities as an alternative to borders in our projects, and using outline-* for focus rings, so we think making things consistent here is a helpful change.

还有一些其他非常底层的实现细节变更可能会以某种方式体现在你的项目中，但这些变更并非刻意为之。如果你遇到任何意外问题，请告知我们。

¥There are a handful of other really low-level implementation detail changes that might surface in some way in your projects, but nothing deliberate like these changes. If you bump into anything surprising, let us know.

v4.0 路线图(Roadmap to v4.0)

¥Roadmap to v4.0

这个新引擎是彻底重写的，到目前为止，我们一直专注于使用新的配置方法重新构想开发者体验。

¥This new engine is a ground-up rewrite, and up until now we've been focused entirely on this reimagined developer experience using the new configuration approach.

我们非常重视向后兼容性，这也是我们在今年晚些时候发布稳定的 v4.0 版本之前的主要工作。

¥We put an enormous amount of value in backwards compatibility, and that's where the bulk of the work lies before we can tag a stable v4.0 release later this year.

支持 JavaScript 配置文件 - 重新引入与经典 tailwind.config.js 文件的兼容性，以便轻松迁移到 v4。

¥Support for JavaScript configuration files — reintroducing compatibility with the classic tailwind.config.js file to make migrating to v4 easy.
显式内容路径配置 - 当自动内容检测无法满足你的设置时，可以告知 Tailwind 模板的确切位置。

¥Explicit content path configuration — making it possible to tell Tailwind exactly where your templates are when automatic content detection isn't good enough for your setup.
支持其他暗黑模式 - 目前我们仅支持使用媒体查询的暗黑模式，并且仍然需要重新实现选择器和变体策略。

¥Support for other dark modes — right now we only support dark mode using media queries, and still need to reimplement the selector and variant strategies.
插件和自定义实用程序 - 我们目前不支持插件，也不支持编写能够自动与变体兼容的自定义实用程序。显然，我们会在稳定版本发布之前完成这项工作。

¥Plugins and custom utilities — we don't have support for plugins, or for writing custom utilities that automatically work with variants yet. Obviously we will make this work before a stable release.
前缀支持 - 目前还无法为你的类配置前缀，但我们肯定会恢复此功能。

¥Prefix support — there's no way to configure a prefix for your classes yet, but we'll bring it back for sure.
安全列表和阻止列表 - 目前还无法强制 Tailwind 生成某些类，也无法阻止其生成其他类。

¥Safelists and blocklists — can't force Tailwind to generate certain classes or prevent it from generating other classes yet.
支持 important 配置 - 目前无法使用 !important 生成所有实用程序，但我们计划实现它。

¥Support for important configuration — there's no way to make utilities all generate with !important right now, but we plan to implement it.
支持 theme() 函数 - 由于你现在可以使用 var()，因此新项目不需要此功能，但为了向后兼容，我们会实现此功能。

¥Support for the theme() function — this isn't needed for new projects because you can use var() now, but we'll implement it for backwards compatibility.
独立 CLI - 我们尚未为新引擎开发独立 CLI，但肯定会在 v4.0 发布之前推出。

¥Standalone CLI — we haven't worked on a standalone CLI for the new engine yet, but will absolutely have it before the v4.0 release.

除此之外，我相信我们还会发现很多需要修复的 bug，一些令人兴奋的新 CSS 功能需要悄悄加入，并且一些新的 API 需要在正式发布之前进一步完善。

¥Aside from that, I'm sure we'll find a lot of bugs to fix, some exciting new CSS features to sneak in, and refine some of these new APIs that need some more polish before a proper release.

我不想承诺具体的发布时间表，但我个人希望在暑假开始之前将 v4.0 标记为稳定版本。

¥I don't want to make promises on a specific release timeline, but I'd personally love to mark v4.0 as stable before the summer holiday season kicks in.

试用 alpha 版本(Try out the alpha)

¥Try out the alpha

我们已经标记了几个 Alpha 版本，你今天就可以开始在你的项目中使用它。

¥We've tagged a couple alpha releases already, and you can start playing with it in your projects today.

如果你正在使用 VS Code 的 Tailwind CSS IntelliSense 扩展，请确保从扩展页面切换到预发布版本；如果你正在使用我们的 Prettier 插件，请确保安装最新版本。

¥If you're using the Tailwind CSS IntelliSense extension for VS Code, make sure you switch to the prerelease version from the extension page, and if you're using our Prettier plugin, make sure you install the latest version.

如果你发现问题，请联系在 GitHub 上告诉我们。我们非常希望在发布稳定版本之前，这件事能够万无一失，报告你发现的任何问题都会对我们大有帮助。

¥If you find an issue, please let us know on GitHub. We really want this thing to be bullet-proof before we tag a stable release and reporting any problems you find will help us a lot.

使用 Vite(Using Vite)

¥Using Vite

安装 Tailwind CSS v4 alpha 版本和我们新的 Vite 插件：

¥Install the Tailwind CSS v4 alpha and our new Vite plugin:

npm install tailwindcss@next @tailwindcss/vite@next

然后将我们的插件添加到你的 vite.config.ts 文件中：

¥Then add our plugin to your vite.config.ts file:

vite.config.ts

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

最后，将 Tailwind 导入到你的主 CSS 文件中：

¥Finally, import Tailwind in your main CSS file:

app.css

@import "tailwindcss";

使用 PostCSS(Using PostCSS)

¥Using PostCSS

安装 Tailwind CSS v4 alpha 版本和单独的 PostCSS 插件包：

¥Install the Tailwind CSS v4 alpha and the separate PostCSS plugin package:

npm install tailwindcss@next @tailwindcss/postcss@next

然后将我们的插件添加到你的 postcss.config.js 文件中：

¥Then add our plugin to your postcss.config.js file:

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

最后，将 Tailwind 导入到你的主 CSS 文件中：

¥Finally, import Tailwind in your main CSS file:

app.css

@import "tailwindcss";

使用 CLI(Using the CLI)

¥Using the CLI

安装 Tailwind CSS v4 alpha 版本和单独的 CLI 包：

¥Install the Tailwind CSS v4 alpha and the separate CLI package:

npm install tailwindcss@next @tailwindcss/cli@next

接下来，在你的主 CSS 文件中导入 Tailwind：

¥Next, import Tailwind in your main CSS file:

app.css

@import "tailwindcss";

最后，使用 CLI 工具编译你的 CSS：

¥Finally, compile your CSS using the CLI tool:

npx @tailwindcss/cli@next -i app.css -o dist/app.css