Tailwind CSS 4.0 发布，提升构建速度

Tailwind CSS 4.0 发布，承诺将构建速度提高 5 倍，增量构建速度提高 100 倍，并提供新的 CSS 特性，只需一条 import 语句即可安装。不过，文档也指出，该版本需要最新的 Web 浏览器核心功能，这可能会限制最初的使用。

在这个流行的 CSS 框架和工具集中，有一个主要的特性是代号为 Oxide 的新构建引擎。该引擎的空间占用比以前少了 35%，虽然主要是用 TypeScript 编写的，但其中包括用 Rust 重写的软件包（用于计算成本最高的操作），并且使用了同样用 Rust 编写的 CSS 解析器 Lightning CSS。

现在，Tailwind CSS 4.0 已针对 Vite JavaScript 和 TypeScript 构建工具做了优化，并且有一个第一方 Vite 插件。根据 Tailwind 创建者 Adam Wathan 的博文，该插件提供了 “最高的性能和最低的配置”。

在该框架新增的 CSS 特性中，有一项是级联层（cascade layers）。它提供了结构特异性，解决了 CSS 中最棘手的特性之一。另一项新特性是使用 CSS 注册自定义属性，允许有默认值的属性设置继承或不继承它们的值。按照 Wathan 的说法，这些现代化特性简化了 Tailwind 的内部结构，使维护工作变得更容易。

一旦使用 npm（ Node 软件包管理器）安装了 Tailwind——尽管 npm 并非必要，也有一个独立的工具可供使用，在项目中包含 Tailwind 就只需在 CSS 文件中添加以下语句：

@import “tailwindcss”;

将该框架与 Next.js 或 Angular 搭配使用时，通常会使用 PostCSS 插件，与 SvelteKit 或 Astro 搭配使用时会使用 Vite 插件。此外，还有用于 Ruby on Rails 的 Tailwind gem，以及在任何项目中使用 Tailwind 的 CLI（命令行界面）工具。

配置已从 JavaScript 文件转移到 CSS 文件中，使用主题变量。旧版 JavaScript 配置文件仍支持，但必须显式加载。

Tailwind CSS 4.0 中的调色板从 rgb（红绿蓝）变成了 oklch（Oklab 颜色空间），增加了色度和色调坐标，使色彩更加丰富。新增加的一个 3D 变换 API ，允许缩放、旋转等。

开发人员必须时刻警惕浏览器的兼容性问题，Tailwind CSS 4.0 要求使用最新的浏览器，具体来说是 Chrome 120 或更高版本、Safari 16.4 或更高版本、Firefox 128 或更高版本。这些浏览器的日期必须是 2023 年之后的，而 Firefox 的日期则需要是 2024 年 7 月之后的。文档中说，这些都是 “核心功能 ”所必需的，而 Tailwind 3.0 的要求则较为宽松。建议开发者在使用旧版浏览器时避免使用不支持的功能，而 Internet Explorer 则完全不被支持 。

虽然提供了升级工具，但也存在一些升级问题。这份完整的升级指南列出了所有破坏性的变更。

Tailwind CSS 框架在 MIT 许可下开源。与 Meta 的 Bootstrap 不同，Tailwind CSS 不包含高级组件，但 TailwindUI 中提供了这些组件，不过需要商业许可。

2023 年 CSS 现状调查（2024 年的调查结果尚未发布）显示，“Tailwind CSS 是开发人员乐于继续使用的主要 UI 框架”，其使用率为 50.5%，其中计划继续使用的占 75.7%。Bootstrap 的使用率更高，但略有下降。在这一领域，这两个框架占据着主导地位，排在第三位的 Materialize CSS 使用率为 21.7%。

关于 Tailwind 优缺点的讨论众说纷纭，其中包括使用无构建步骤的 vanilla CSS 的观点。Wathan 创建 Tailwind 正是因为在大型项目中维护 CSS 文件所面临的挑战。有些人对破坏性更改的数量感到不满，但正如一位开发人员所说：“减少依赖和提高性能总是受欢迎的。”

不过，浏览器兼容性是个问题，与大多数初始版本一样，在不确定用户浏览器是否支持的情况下，开发人员会谨慎对待在生产中的早期采用。

声明：本文为 InfoQ 翻译，未经许可禁止转载。

原文链接：https://devclass.com/2025/01/24/tailwind-css-4-0-released-with-ground-up-rewrite-for-faster-rust-powered-build