新发布的TailwindCSS v3,JIT引擎成为默认选择

发表时间: 2021-12-13 17:00


TailwindCSS v3 正式版发布了,这是一个为 JIT 而生的版本,它移除了原先的 AOT 引擎,把 JIT 作为默认的引擎。接下来我们来看看它有哪些新的特性吧。

更强的即时编译引擎

更加强大的即时编译引擎, 带来了巨大的性能提升的同时,也解锁了任意值(arbitrary values)和更强的变体(variant)功能。

举个例子,原先我们经常把多个修饰符样式这样写 sm:top-[50px] sm:flex ,现在我们可以把他们全部组合起来: sm:hover:active:disabled:opacity-75,而且这套机制是可以和任意值进行结合的。

这无疑让我们编写时更加的自由,加快原型页面的实现速度。当然适当的时间也完全可以进行 @apply 提取,从而抽出公共样式和减小 dom class 的长度。

开箱即用的颜色

总的来说,就是内置颜色变多了,而且结合 jit 引擎,也让tailwindCSS 配合 CSS variables 使用更加的简单。详见 customizing-colors.

有颜色的阴影

现在阴影也有颜色了!

现在颜色的CSS变量使用 --tw-shadow-color: rgb(6 182 212/0.5); 来表示了,写法就是 shadow-cyan-500/50 前面代表使用的颜色,后面代表透明度,还是很方便的。

Scroll snap API

这个是和更加精准的操控滚动体验有关的,笔者不是很懂,实际在项目中也没用过。

文字排版

这个 columns 是一个CSS的排版属性,它作用在这样一个场景,当一个 dom 内有大量的文字,我们可以使用这个属性来控制这些文字显示的列数,并自定义他们的宽度。

原先我们要达成这样的目的,可以在 js 里分割这些文字,把他们放入不同的 dom 内,再进行 CSS 排版,总的来说这个特性还是挺方便的,但是使用场景可能不是那么多。

覆盖原生控件样式

我们知道,像浏览器对一些标签,有默认的样式和行为,比如 <input type="file"/> , <audio> 等等,现在 tailwind 也内置了一些属性和修饰符,来方便的覆盖控件们的默认样式了。

打印修饰符

<div>  <article class="print:hidden">    密码:123456 ,打印的时候不要显示!  </article>  <div class="hidden print:block">    机密信息无法打印!  </div></div>

这个例子简短的说明了一切,本质是依靠 @media print 来实现的。

容器长宽比

这个长宽比之前已经用的很多了,还有很多的 hack way。比如padding-top 这类。现在 tailwind 终于加入了进来,同时在 jit 模式下使用非常方便,例如 aspect-[4/3] 就是一个 4:3 的容器。

更多的下划线样式

这个可能做文本编辑器比较实用吧,一般用的比较少。

文字显示方向修饰符

这个用的也不是特别多,现代人一般都是从左开始阅读到右边的。

中国的古文好像都是从右到左,从上到下阅读的。当我们穿越回古代,给古人们开发文档管理系统时,这个属性会非常有用。

横屏竖屏修饰符

landscape(横屏) | portrait(竖屏)

本质又是媒体查询 @media (orientation: portrait)@media (orientation: landscape) ,移动端用的比较多。

强大的任意属性

现在不合法的属性,也可以被修饰符,组合起来使用了。

<div class="[mask-type:luminance] hover:[mask-type:alpha]">  <!-- ... --></div>

Play CDN

这个 CDN 真的是一个大亮点啊!没想到 CDN 还能这么玩,这里必须展示一下它的配置:

<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="https://cdn.tailwindcss.com/"></script>  <script>    tailwind.config = {      theme: {        extend: {          colors: {            clifford: '#da373d',          }        }      }    }  </script>  <style type="text/tailwindCSS">    @layer utilities {      .content-auto {        content-visibility: auto;      }    }  </style></head><body>  <h1 class="text-3xl font-bold underline text-clifford">    Hello world!  </h1>  <div class="lg:content-auto">    lg:content-auto  </div></body></html>

这是什么? 这是一个 tailwindcss 样式生成器脚本,它允许我们自定义 configlayer ,并实时计算出需要的样式来渲染我们的 html

不过啊,正如名字 Play CDN 所言 ,这个还只是一个开发时的玩具,是不能上生产的。这点作者也在文档中说明了。

Breaking Changes

通过阅读 CHANGELOG.md,笔者发现其实没有啥,在从 v2 -> v3 的过程中,除了一些配置项的改变带来的 warning,其他似乎一切运转良好。这里给想升级的朋友一些建议,如果你还在使用 postcss7(vue-cli@4.x) ,请不要升级。还有 3.0.0 刚出来注定 bug 很多,(这不,他们立马发布了3.0.1版本~),建议生产环境的项目先观望一段时间再升级。

总结

看了这篇 v3 release 的博文,感觉作者们还是很幽默风趣的,藏了不少的小彩蛋在里面。

同时个人有一个畅想:我们可以自己部署一些 CDN 边缘计算节点,然后来设置 CDN 资源缓存策略。通过这样的方式来动态生成所有服务所需的所有静态资源?

不,不只是静态资源,我们在 nodejsimport lodash from 'https://cdn.npmpkg.com/lodash/4' 或者 const lodash = require('https://cdn.npmpkg.com/lodash/4) 时,CDN 会自己帮我们做 cjsesm 的转化,并在请求的时候击中缓存。这个似乎已经有 CDN 办到了。

另外个人把这个 release v3 版本,看做一个终于稳定的 jit 模式。

因为在之前的 v2 版本,可以从源码中看到开启 mode:jit 和未开启,代码走的是不同的分支,jit 也有专门的文件夹来存放这方面的逻辑,显然当时作者们编写这个功能,只是在试水。这样做是为了确保这个模式,不会影响原先未开启的逻辑,从而给非jit模式带来 bug

v3版本 jit 已经完全的融入进源码中,成为紧密连接的一份子了。

另外,每次看 tailwind 文档都有 css 方面新的收获啊!

参考链接

原文链接