预览版:Tailwind CSS v4,高性能的全新CSS引擎!

发表时间: 2024-03-11 13:18

去年夏天在 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 稳定版本!