去年夏天在 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 优先配置等功能进一步提升了框架的灵活性和易用性，使开发者能够更加专注于业务逻辑的实现，而非繁琐的配置和调试工作。