Tailwind CSS 可以说是目前最火的CSS框架,使用功能类优先的原则聚合CSS样式,使用框架提供的类即可完成布局和样式。虽然听着像是回到了bootstrap的时代,但使用之后明显感觉到开发体验很好。
今天(12月10号)Tailwind CSS v3.0发布,该版本有很多重要的升级。主要改进在于编译引擎,自定义值,内置颜色扩展,彩色阴影效果,多列布局,打印修饰符等。
想体验新版本的开发者,可以安装最新版本。
npm install -D tailwindcss@latest postcss autoprefixer
下面详细介绍一下3.0的主要变化:
本次主要的升级就是将 classic 引擎替换为性能更强的 Just-in-Time 引擎。替换之后,不仅使得编译速度大大提升,还能实现例如自定义值这类复杂配置的功能。
Tailwind CSS 虽然功能聚合做得很好,但是缺少了扩展性。3.0带来了自定义值配置,可以将个性化的需求和 Tailwind CSS 的类进行结合。举个栗子:
Tailwind CSS class top-3 可以设置距顶部的高度,但是 Tailwind CSS 提供的选项是固定的,比如说 top-1, top-2, top-3... 如果想自定义一个高度怎么办呢?
现在可以使用自定义值,使用方式如下:
使用自定义值既能避免手写CSS,又能实现个性化需求。
使用过 Tailwind CSS 的开发者都知道,其内置了一下颜色,每个颜色按深浅分为10个等级。2.0版本内置了 8 种颜色,如果需要其他颜色需要自己配置。
Tailwind CSS 团队一直想增加颜色种类,但是考虑到编译性能和CSS体积大小,只能放弃。直到本次引擎的升级,增加颜色的问题才得以解决。
因此3.0版本内置了 22 种颜色,开箱即用!当然如果还不能满足需求,依然支持自定义颜色。
Tailwind CSS 3.0 新增了shadow 类,实现彩色的 box shadow。
这是一个很强大又很实用的功能,一般行列布局都是需要前端组件库实现的。
在元素上添加打印修饰符,能够修改打印的样式。
Tailwind CSS 3.0 可以修改下划线的颜色,高度,样式等。
Tailwind CSS 3.0 本次还有一些更新点,有兴趣的朋友可以去官网查看一下更新文档。Tailwind CSS 3.0 是较大的一次升级,基本上兼容2.0的API。绝大部分项目都可以直接从2.0升级到3.0版本。
Tailwind CSS 3.0 是非常强大的CSS框架,非常值得尝试~
如果您觉得这篇文章对您有帮助,欢迎点赞,评论,转发~