Tailwind 正在为 Tailwind CSS 准备一个新的高性能引擎,旨在简化开发人员体验并利用近年来 Web 平台的发展。
现在还处于早期阶段,Tailwind 还有很多工作要做,但他们最近发布了进展并标记了第一个公开的v4.0.0-alpha,以便您可以开始尝试它。
全新引擎,为速度而生
新的引擎是从头开始重写的,利用迄今为止的所有框架经验来更好地进行模型改进,从而用更少的代码加快速度。
速度最高提升 10 倍:您可以在 105 毫秒内 挪威号码数据(而不是 960 毫秒)创建完整的 Tailwind CSS 网站,或者使用 Catalyst UI Kit 在 55 毫秒内(而不是 341 毫秒)创建完整的 Tailwind CSS 网站。
减轻重量:新发动机安装后体积缩小35%以上。
Rust 的重要性:我们将框架中一些最可并行化的部分迁移到了 Rust,同时将框架的核心保留在 TypeScript 中,以实现更大的可扩展性。
只有一个依赖项:新引擎唯一依赖的是 Lightning CSS。
自定义解析器:新版 Tailwind 的开发人员编写了自己的 CSS 解析器,并根据新需求设计了自己的数据结构,使得解析速度比 PostCSS 快两倍。
专为现代网络而设计
我们正在展望 Tailwind CSS v4,并且团队正在寻求构建一个在未来几年内处于领先地位的框架。
原生级联层 - 我们现在使用真正的@layerrules,它解决了我们过去遇到的大量特殊性问题。
明确定义的自定义属性:我们使用@property 定义具有适当类型和约束的内部自定义属性,从而允许我们执行诸如过渡背景渐变之类的操作。
使用 color-mix 作为不透明度修饰符:在使用 CSS 变量作为颜色,甚至调整 currentColor 的不透明度时,使用不透明度修饰符语法比以往更容易。
核心中的容器查询:直接向核心添加了对容器查询的支持,并为容器查询范围添加了新的 @min-* 和 @max-* 变体。
我们还在进行中,以使用更广泛的颜色更新调色板,并引入对其他现代 CSS 功能(如 @starting-style、锚定位等)的支持。
Tailwind 4.0 有哪些变化?
删除了过时的实用程序:删除了长期不再记录的实用程序,例如 text-opacity-*、flex-grow-*
PostCSS 插件和 CLI 是单独的包 - 主 tailwindcss 包不再包含它们,因为不是每个人都需要它们 - 必须使用 @tailwindcss/postcss 和 @tailwindcss/cli 单独安装它们。
没有默认边框颜色:边框以前默认为灰色-200,但现在默认为与浏览器相同的当前颜色。如果您使用其他灰色,则进行此项更改是为了使您更难意外地将错误的灰色引入到您的项目中。
还有一些其他非常低级别的实施变化可能会以某种方式潜入您的项目中,但并不像这些变化那样是经过深思熟虑的。