新发布的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 样式生成器脚本，它允许我们自定义 config 和 layer ，并实时计算出需要的样式来渲染我们的 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 资源缓存策略。通过这样的方式来动态生成所有服务所需的所有静态资源？
不，不只是静态资源，我们在 nodejs 里 import lodash from 'https://cdn.npmpkg.com/lodash/4' 或者 const lodash = require('https://cdn.npmpkg.com/lodash/4) 时，CDN 会自己帮我们做 cjs 和 esm 的转化，并在请求的时候击中缓存。这个似乎已经有 CDN 办到了。
另外个人把这个 release v3 版本，看做一个终于稳定的 jit 模式。
因为在之前的 v2 版本，可以从源码中看到开启 mode:jit 和未开启，代码走的是不同的分支，jit 也有专门的文件夹来存放这方面的逻辑，显然当时作者们编写这个功能，只是在试水。这样做是为了确保这个模式，不会影响原先未开启的逻辑，从而给非jit模式带来 bug。
v3版本 jit 已经完全的融入进源码中，成为紧密连接的一份子了。
另外，每次看 tailwind 文档都有 css 方面新的收获啊！
参考链接
原文链接
鲁公网安备37020202000738号