主要观点:介绍 Tailwind CSS 的 v4.0 版本,包括新引擎 Oxide 的特性、统一工具链、面向现代网络的设计、可组合变体、零配置内容检测、CSS 优先配置等,还提及了路线图和试用 alpha 版本的方法。
关键信息:
- 新引擎 Oxide 速度提升达 10 倍,体积减小超 35%,部分用 Rust 编写,仅依赖 Lightning CSS 且有自定义解析器。
- Tailwind CSS v4 是一体化处理 CSS 的工具,集成 Lightning CSS,具备内置导入处理、厂商前缀添加、嵌套支持等。
- 面向现代网络设计了原生层叠、自定义属性、颜色混合、容器查询等特性。
- 新架构可组合变体,如
group-*
等可相互组合。 - 零配置内容检测通过 PostCSS 插件或 Vite 插件自动找到模板文件。
- CSS 优先配置,通过
@import
引入,用 CSS 变量设置自定义项,可覆盖默认主题。 - v4 有一些变化,如移除弃用工具、插件和 CLI 分离等。
- 路线图包括支持 JavaScript 配置文件等多项工作,以实现稳定版本。
- 可通过不同方式试用 alpha 版本,如在 VS Code 中使用扩展、安装相应插件或使用 CLI 工具。
重要细节:
- 新引擎在构建 Tailwind CSS 网站和 Catalyst UI 套件时速度大幅提升。
- 内置工具链减少了配置需求,如无需单独配置
postcss-import
等。 - 原生层叠规则解决了特异性问题,自定义属性定义更规范。
- 可组合变体的示例展示了不同变体的组合使用。
- 零配置内容检测在不同集成方式下的工作原理。
- CSS 优先配置中
@theme
指令的作用及相关示例。 - v4 变化中的具体弃用工具和默认设置调整。
- 路线图中的各项工作细节和目标。
- 试用 alpha 版本在不同工具中的安装和配置步骤。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。