开源我们在 Tailwind CSS v4.0 上的进展

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

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

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

🌐 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毫秒内完成Tailwind CSS网站的完整构建，而不是960毫秒，或者在55毫秒内完成我们的Catalyst UI工具包的构建，而不是341毫秒。
• 占用空间更小 — 即使包含我们提供的较重原生包，如用 Rust 和 Lightning CSS 重写的部分，新引擎安装后的体积也缩小了超过 35%。
• 在关键之处使用 Rust — 我们已将框架中一些最昂贵且可并行的部分迁移到 Rust，同时保持框架核心在 TypeScript 中以便扩展。
• 一个依赖 — 新引擎唯一依赖的就是 Lightning CSS。
• 自定义解析器 — 我们编写了自己的 CSS 解析器，并设计了符合我们需求的数据结构，使得解析速度比使用 PostCSS 快了两倍以上。

统一工具链(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 那样设置和配置工具。
• 内置厂商前缀支持 — 你再也不需要在项目中添加 autoprefixer 了。
• 内置嵌套支持 — 无需插件即可展平嵌套的 CSS，开箱即用。
• 语法转换 — 现代 CSS 特性，如 oklch() 颜色和媒体查询范围，会被转译为具有更好浏览器兼容性的语法。

我们仍在发布 PostCSS 插件，但我们也在探索官方打包器插件，并且我们在这个首个 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)

我们着眼于 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 规则，这解决了过去困扰我们的许多优先级问题。
• 明确定义的自定义属性 — 我们使用 @property 来定义内部自定义属性，并设置适当的类型和约束，使得可以实现诸如渐变背景的过渡效果。
• 使用 color-mix 进行不透明度修改 — 在使用 CSS 变量设置颜色时，或者调整 currentColor 的不透明度时，使我们的不透明度修改语法比以往任何时候都更容易使用。
• 核心中的容器查询 — 我们已直接在核心中添加对容器查询的支持，并提供了新的 @min-* 和 @max-* 变体以支持容器查询范围。

我们也正在更新我们的配色方案，使用宽色域颜色，并引入对其他现代 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)

新的架构使得可以将作用于其他选择器的变体组合在一起，例如 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-* 变体组合，而 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:

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

你会注意到，至少在这些早期的 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 文件中列出的目录，并会忽略二进制文件格式。
• 使用 Vite 插件时，我们依赖于模块图。这非常棒，因为我们可以确切地知道你实际使用了哪些文件，因此性能最大化，而且不会出现误报或漏报。我们希望将这种方法在未来扩展到 Vite 生态系统之外的其他打包工具插件中。

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

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

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:

@import "tailwindcss";

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

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

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

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

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

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

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

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

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)

我们不会轻易接受重大变更，但目前为止，我们在 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。
• PostCSS 插件和 CLI 是独立的包 —— 主要的 tailwindcss 包不再包含它们，因为并非所有人都需要它们，应该使用 @tailwindcss/postcss 和 @tailwindcss/cli 单独安装。
• 无默认边框颜色 — border 工具以前默认使用 gray-200，但现在像浏览器一样默认使用 currentColor。我们做出这个更改是为了在你使用 zinc、slate 或其他颜色作为主要灰色时，更难意外地在项目中引入错误的灰色。
• 环默认是1像素 — ring 工具以前默认是3像素的蓝色环，现在使用 currentColor 变成了1像素环。我们发现在项目中会将 ring-* 工具作为边框的替代方案，而使用 outline-* 用于聚焦环，因此我们认为在这里保持一致是一个有益的改进。

还有一些其他非常底层的实现细节上的更改，可能会在你的项目中以某种方式显现，但没有像这些更改一样是刻意的。如果你遇到任何令人惊讶的情况，请告诉我们。

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

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

🌐 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 版本之前，大部分工作的重点所在。

• 支持 JavaScript 配置文件 — 重新引入对经典 tailwind.config.js 文件的兼容性，使迁移到 v4 变得更容易。
• 显式内容路径配置 — 当自动内容检测不足以满足你的设置时，使你能够精确告知 Tailwind 模板所在的位置。
• 支持其他夜间模式 — 目前我们只支持使用媒体查询的夜间模式，还需要重新实现选择器和变体策略。
• 插件和自定义工具 — 我们目前不支持插件，也不支持编写能够自动与变体一起工作的自定义工具。当然，我们会在稳定版本发布前实现这一功能。
• 前缀支持 — 目前还无法为你的类配置前缀，但我们一定会重新引入这一功能。
• 允许列表和阻止列表 — 目前无法强制 Tailwind 生成某些类，也不能阻止它生成其他类。
• 对 important 配置的支持 — 目前没有办法让所有实用程序都使用 !important 生成，但我们计划实现这一功能。
• 对 theme() 功能的支持 — 对于新项目来说不需要，因为你现在可以使用 var()，但我们会为了向后兼容而实现它。
• 独立 CLI — 我们还没有为新的引擎开发独立的 CLI，但在 v4.0 版本发布前一定会推出。

除此之外，我相信我们还会发现很多需要修复的 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)

我们已经标记了几个 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)

安装 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:

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

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

🌐 Finally, import Tailwind in your main CSS file:

@import "tailwindcss";

使用 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:

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

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

🌐 Finally, import Tailwind in your main CSS file:

@import "tailwindcss";

使用 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:

@import "tailwindcss";

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

🌐 Finally, compile your CSS using the CLI tool:

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