Open-sourcing our progress on Tailwind CSS v4.0

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

新引擎最初将作为 v3.x 版本发布，但即使我们致力于向后兼容，这显然感觉像是框架的新一代，因此它应该成为 v4.0。

现在还为时过早，我们还有很多工作要做，但今天我们开源了我们的进展并标记了第一个公共 v4.0.0-alpha，以便您可以开始试验它并帮助我们在今年晚些时候发布稳定版本。

我将尽量简短，以便为稳定版本节省一些兴奋感，但如果您喜欢使用非常早期和实验性的东西，那么这里应该有足够的信息让您入门。

一个新的引擎，专为速度而构建

新引擎是从头开始重写的，它利用了我们现在对框架的所有了解，以更好地对问题空间进行建模，从而以更少的代码更快地完成工作。

• 速度提高高达 10 倍 — 我们可以在 105 毫秒内完成 Tailwind CSS 网站的完整构建，而不是 960 毫秒，或者在 55 毫秒内完成 Catalyst UI 套件，而不是 341 毫秒。
• 更小的占用空间 — 即使使用我们提供的更重的原生软件包（例如我们在 Rust 和 Lightning CSS 中重写的部分），新引擎的安装尺寸也减少了 35% 以上。
• Rust 在关键的地方 — 我们已将框架的一些最昂贵和可并行化的部分迁移到 Rust，同时将框架的核心保留在 TypeScript 中以实现可扩展性。
• 一个依赖项 — 新引擎唯一依赖的是 Lightning CSS。
• 自定义解析器 — 我们编写了自己的 CSS 解析器并设计了自己的数据结构以满足我们的需求，这使得我们的解析速度比使用 PostCSS 快 2 倍以上。

统一的工具链

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

• 内置 @import 处理 — 无需设置和配置像 postcss-import 这样的工具。
• 内置供应商前缀 — 您不再需要将 autoprefixer 添加到您的项目中。
• 内置嵌套支持 — 无需插件即可展平嵌套 CSS，它可以开箱即用。
• 语法转换 — 诸如 oklch() 颜色和媒体查询范围之类的现代 CSS 功能被转换为具有更好浏览器支持的语法。

我们仍在发布 PostCSS 插件，但我们也在探索第一方捆绑器插件，并且我们正在发布此第一个 Alpha 版本附带的官方 Vite 插件，您可以立即试用。

为现代 Web 设计

我们正在展望 Tailwind CSS v4 的未来，并尝试构建一个在未来几年内都会感觉前沿的框架。

• 原生级联层 — 我们现在使用真正的 @layer 规则，这解决了我们过去遇到的大量特异性问题。
• 显式定义的自定义属性 — 我们使用 @property 来定义具有适当类型和约束的内部自定义属性，从而可以执行诸如过渡背景渐变之类的操作。
• 使用 color-mix 作为不透明度修饰符 — 使得在使用 CSS 变量作为颜色时，甚至在调整 currentColor 的不透明度时，比以往任何时候都更容易使用我们的不透明度修饰符语法。
• 核心中的容器查询 — 我们已将容器查询的直接支持添加到核心，并添加了新的 @min-* 和 @max-* 变体以支持容器查询范围。

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

可组合的变体

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

在早期版本中，诸如 group-has-* 之类的变体在框架中是显式定义的，但现在 group-* 可以与现有的 has-* 变体组合，而 has-* 变体又可以与其他变体（如 focus）组合：

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

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.

零配置内容检测

您会注意到，至少在这些早期的 Alpha 版本中，甚至无法配置您的 content 路径。 对于大多数项目，您将永远不需要再这样做 — Tailwind 会自动为您找到模板文件。

我们根据您如何将 Tailwind 集成到项目中，使用以下两种方式之一来实现这一点：

• 使用 PostCSS 插件或 CLI，Tailwind 将爬取整个项目以查找模板文件，使用我们内置的一堆启发式方法来保持速度，例如不爬取 .gitignore 文件中的目录，并忽略二进制文件格式。

• 使用 Vite 插件，我们依赖于模块图。 这很棒，因为我们确切地知道您实际使用了哪些文件，因此它的性能最大化，并且没有误报或漏报。 我们希望在未来通过其他捆绑器插件将这种方法扩展到 Vite 生态系统之外。

我们肯定会在未来引入一种显式配置内容路径的方法，但我们很好奇这种自动方法对每个人的效果如何 — 它在我们自己的项目中效果很好。

CSS 优先配置

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

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

@import "tailwindcss";

而不是在 JavaScript 配置文件中设置所有自定义项，您只需使用 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 之类的类：

<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 语法清除命名空间，然后定义所有自定义值：

@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 上探索默认主题以查看可自定义的内容。

如果您不想显式清除默认主题并希望从头开始，可以直接导入 "tailwindcss/preflight" 和 "tailwindcss/utilities" 以跳过导入默认主题：

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

: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() 函数：

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

这也使得在使用诸如 Framer Motion 之类的 UI 库时，可以使用主题值，而无需使用 resolveConfig() 函数：

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

发生了什么变化

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

• 删除了弃用的实用程序 — 我们删除了很久以前停止记录的实用程序，例如 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 或其他作为主要灰色时，不小心引入错误的灰色变得更加困难。
• 环默认是 1px — ring 实用程序以前默认是 3px 蓝色环，现在它是使用 currentColor 的 1px 环。 我们发现自己在项目中使用 ring-* 实用程序作为边框的替代品，并使用 outline-* 作为焦点环，因此我们认为在这里进行一致性更改是有帮助的。

还有一些其他非常低级的实现细节更改，可能会在某种程度上出现在您的项目中，但没有像这些更改那样有意为之。 如果您遇到任何意外情况，请告诉我们。

v4.0 的路线图

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

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

• 支持 JavaScript 配置文件 — 重新引入与经典 tailwind.config.js 文件的兼容性，以便轻松迁移到 v4。
• 显式内容路径配置 — 使得在自动内容检测不足以满足您的设置时，可以明确告诉 Tailwind 您的模板位置。
• 支持其他暗模式 — 目前我们仅支持使用媒体查询的暗模式，仍需要重新实现选择器和变体策略。
• 插件和自定义实用程序 — 我们尚不支持插件，也不支持编写自动与变体一起工作的自定义实用程序。 显然，我们将在稳定版本之前使其工作。
• 前缀支持 — 目前无法为类配置前缀，但我们肯定会将其带回。
• 安全列表和阻止列表 — 无法强制 Tailwind 生成某些类或阻止其生成其他类。
• 支持 important 配置 — 目前无法使实用程序全部生成 !important，但我们计划实现它。
• 支持 theme() 函数 — 这对于新项目来说并不需要，因为您现在可以使用 var()，但我们会为了向后兼容而实现它。
• 独立 CLI — 我们尚未为新引擎开发独立的 CLI，但在 v4.0 发布之前肯定会有。

除此之外，我相信我们会发现很多错误需要修复，一些令人兴奋的新 CSS 功能需要偷偷加入，以及一些需要在正式发布之前进行更多打磨的新 API。

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

试用 Alpha 版本

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

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

如果您发现问题，请在 GitHub 上告诉我们。 我们真的希望在标记稳定版本之前，这个东西是万无一失的，报告您发现的任何问题将对我们有很大帮助。

使用 Vite

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

npm install tailwindcss@next @tailwindcss/vite@next

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

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

最后，在您的主 CSS 文件中导入 Tailwind：

@import "tailwindcss";

使用 PostCSS

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

npm install tailwindcss@next @tailwindcss/postcss@next

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

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

最后，在您的主 CSS 文件中导入 Tailwind：

@import "tailwindcss";

使用 CLI

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

npm install tailwindcss@next @tailwindcss/cli@next

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

@import "tailwindcss";

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

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