去年夏天在 Tailwind Connect 上，Tailwind 团队分享了 Oxide 的预览，这是Tailwind 团队正在努力开发的新一代高性能引擎，旨在简化开发者体验，并充分利用近年来 Web 平台的演变。

这个新引擎最初计划作为 v3.x 版本发布，但尽管 Tailwind 团队致力于向后兼容，但它如此明显地像一个框架的新一代，以至于应该成为 v4.0 版本。

现在还处于早期阶段，Tailwind 团队有很多工作要做，但今天 Tailwind 团队公开了他们的进展，并标记了第一个公共版本 v4.0.0-alpha，让您可以开始尝试并帮助 Tailwind 团队在今年晚些时候发布稳定版。

下面会尽量简短以便留点惊喜给稳定版发布时再说，如果你喜欢玩非常早期和实验性质的东西，请看这里应该有足够信息让你开始。

为速度而建的新引擎

新引擎是从头开始重写的，利用我们现在对框架的所有了解来更好地建模问题空间，通过少得多的代码使事情变得更快。

• 速度提升多达 10 倍：我们可以在 105 毫秒内完成 Tailwind CSS 网站的完整构建，而不是 960 毫秒，或者在 55 毫秒内完成 Catalyst UI 套件的构建，而不是 341 毫秒。
• 更小的体积：新引擎安装后体积减小了 35%，即使我们发布了像用 Rust 重写和 Lightning CSS 这样较重的本地包。
• 关键部分采用 Rust：我们已将框架中一些最昂贵且可并行化的部分迁移到了 Rust，同时保持框架核心使用 TypeScript 以实现可扩展性。
• 仅一个依赖项：新引擎唯一依赖于 Lightning CSS。
• 自定义解析器：我们编写了自己的 CSS 解析器，并设计了符合我们需求的数据结构，使得对我们来说解析速度比使用 PostCSS 快 2 倍。

统一工具链

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

• 内置 @import 处理：无需设置和配置像 postcss-import 这样的工具。
• 内置前缀：您不再需要将 autoprefixer 添加到您的项目中。
• 内置嵌套支持：不需要插件来展平嵌套的 CSS，它可以直接运行。
• 语法转换支持：现代 CSS 功能和媒体查询范围被转译为具有更好浏览器支持的语法。

我们仍在发布一个 PostCSS 插件，但同时也在探索第一方捆绑插件，并且我们正在使用此首个 alpha 版本发布了一个官方 Vite 插件，您今天就可以尝试。

为现代网络设计

我们正在研究未来的 Tailwind CSS v4，并尝试构建一个在未来几年仍然具有前沿感的框架。

• 本地级联层：我们现在使用真正的 @layer 规则，解决了我们过去一直在努力解决的许多特异性问题。
• 明确定义自定义属性：我们使用 @property 来定义内部自定义属性，具有适当的类型和约束，使得可以做像过渡背景渐变这样的事情成为可能。
• 使用 color-mix 进行不透明度修改器：现在更容易地使用我们的不透明度修改器语法，当使用CSS变量进行颜色时，甚至调整 currentColor 的不透明度也很方便。
• 核心中包含容器查询：我们已经直接将对容器查询的支持添加到核心中，并新增了新的 @min-* 和 @max-* 变体以支持容器查询范围。

我们还正在更新我们的色彩板以支持广色域颜色，并引入其他现代 CSS 功能如 @starting-style、锚定位等。

可组合的变体

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

在早期版本中，像 group-has-* 这样的变体是在框架中明确定义的，但现在 group-* 可以与现有的 has-* 变体组合，并且可以与其他变体（比如 focus）进行组合：

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

这种可组合性没有限制，甚至可以编写类似
group-not-has-peer-not-data-active:underline 这样的内容，如果出于某种可怕的原因你需要这样做。

零配置内容检测

您会注意到，至少在这些早期的 alpha 版本中，甚至无法配置您的 content 路径。对于大多数项目来说，您永远不需要再次执行此操作，Tailwind CSS 只是为您找到模板文件。

我们使用两种方式之一来实现这一点，具体取决于您如何将 Tailwind CSS 集成到项目中：

• 使用 PostCSS 插件或 CLI：Tailwind CSS 将遍历整个项目以查找模板文件，并使用了许多启发式方法来保持速度快，比如不遍历在 .gitignore 文件中的目录，并忽略二进制文件格式。
• 使用 Vite 插件：我们依赖于模块图。这很棒因为我们确切地知道哪些文件实际上被使用了，所以它具有最佳性能，并且没有误报或漏报。我们希望未来可以通过其他捆绑器插件扩展这种方法以适用于 Vite 生态系统之外。

我们肯定会在未来引入一种明确配置内容路径的方式，但是我们很好奇看看这种自动化方法对每个人都起作用得有多好，它在我们自己的项目中运行得非常出色。

CSS 优先配置

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

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

@import "tailwindcss";

您只需使用 CSS 变量，而不是在 JavaScript 配置文件中设置所有自定义：

@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 CSS 根据这些变量提供新的实用程序和变体，让您可以在标记中使用类似 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>

它还使得在使用 UI 库（如 Framer Motion）时能够使用您的主题值，而无需使用 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>)

总结

Tailwind CSS v4.0-alpha 的发布标志着该 Tailwind CSS 框架在性能和现代化 CSS 体验方面的重大进步，通过全新的高性能引擎、一体化工具链以及对现代网络设计的支持，Tailwind 团队为开发者带来了更高效、更便捷的 CSS 开发体验，可组合的变体、零配置内容检测以及 CSS 优先配置等功能进一步提升了框架的灵活性和易用性，使开发者能够更加专注于业务逻辑的实现，而非繁琐的配置和调试工作。

往期回顾

1. UI 和 UX 全面升级，Node.js 新官网预览版发布！
2. Node.js 特别吉祥物：「火箭龟」引领新篇章！
3. Bun v1.0.30 正式发布，即将提供 Windows 稳定版本！