开源 CSS 框架 Tailwind CSS v4.0

开源 CSS 框架 Tailwind CSS v4.0 于 1 月 22 日正式发布，除了显著提升性能、简化配置体验外，还增强了功能特性，具体如下1：

性能提升

采用全新的高性能引擎 Oxide，带来了构建速度的巨大飞跃：

• 全量构建速度提升超 3.5 倍。
• 增量构建速度提升超 8 倍。
• 无新 CSS 的增量构建速度提升 182 倍。

配置优化

• CSS 优先配置：从 JavaScript 配置文件改为直接在 CSS 文件中使用 @theme 指令进行配置，简化了项目文件结构。
• 自动源检测：自动检测内容源，忽略.gitignore 中的文件和二进制文件，也可通过 @source 指令添加默认排除的源。
• 内置导入支持：无需额外插件即可处理 @import，与引擎紧密集成，速度更快。
• 内置 CSS 转译：生产构建时自动通过 Lightning CSS 处理供应商前缀、现代特性转译、压缩等，可移除相关工具。

功能增强

• CSS 主题变量：设计标记默认作为 CSS 变量，方便在运行时引用，可用于内联样式或传递给动画库。
• 原生 CSS 层叠层：使用真实 CSS 层叠层，更易控制样式优先级和交互，能减少代码维护量。
• 动态间距比例：从单一间距比例值派生多种间距实用工具，可自定义或禁用默认间距变量。
• 现代化 P3 颜色调色板：默认颜色调色板从 rgb 升级到 oklch，色彩更鲜艳，升级项目时颜色平衡保持一致。
• 简化变量颜色：借助 color - mix () 函数，定义颜色变量更简单，不透明度修饰符自动生效。
• 容器查询支持：核心支持容器查询，无需额外插件，新增 @max-* 变体，可堆叠变体定义查询范围。
• 3D 变换：添加 3D 变换 API，如旋转、缩放、平移等，可控制透视和背面可见性。
• 多种梯度增强：线性梯度支持角度值，新增梯度插值修饰符，添加圆锥和径向梯度实用工具。
• 新增实用工具类：包括 inset-shadow-、inset-ring-、field-sizing-、color-scheme-、font-stretch-* 等，满足不同场景需求。
• 变体增强：可组合变体，新增 @starting-style、not-、inert、nth-、in-* 等变体，open 变体支持:popover-open 伪类。
• 后代变体：新增 ** 变体，用于选择所有后代元素，结合其他变体可精准筛选。