【CSS】1209- TailwindCSS v3.0 正式發(fā)布！一大波新特性來襲！
大家好，我是皮湯。最近一直在研究 TailwindCSS 相關(guān)的內(nèi)容，打算將其用在接下來的各種項(xiàng)目中，之前也寫過關(guān)于 CSS 工程化方面的文章：2021 年你需要之前的 CSS 工程化技術(shù)，今天給大家介紹一篇關(guān)于 Tailwind 最新發(fā)布的 v3.0 相關(guān)的內(nèi)容。
2021 年 12 月 10 日，TailwindCSS 的創(chuàng)始人 Adam Wathan 宣布 TailwindCSS v3.0 正式發(fā)布，帶來了一系列性能上的改進(jìn)、對開發(fā)工作流的改善以及大量的新特性。
那么這顆在 CSS 工程化領(lǐng)域極為耀眼的新星在 v3.0 為我們帶來了那些有趣的新特性呢？我們接下來就來一一的介紹它們。
隨時隨地的 Just-in-Time 模式
Tailwind 2.x 里面引入了一種新的模式，Just-in-Time 模式，可以保持開發(fā)和生產(chǎn)構(gòu)建是一致的，且都是按需構(gòu)建，相比之前 Tailwind 需要將所有基礎(chǔ)的內(nèi)容進(jìn)行構(gòu)建來說大大提升了性能，針對任何構(gòu)建工具，如 Webpack 只需要 800ms 就可以構(gòu)建完成，而在之前，可能需要 30-45s。
而且得益于 JIT 模式，Tailwind 支持了 “任意值輔助類” 等一系列新的特性。
之前使用 JIT 時，需要在配置文件里面指定模式：
//?tailwind.config.js
module.exports?=?{
?//?...
??mode:?'jit',
??//?...
}
然后你就可以享受到極快的構(gòu)建速度，而且可以使用任意值的輔助類，如：
"top-[-113px]"> 這在之前的 Tailwind 版本中是不允許的，如果需要覆蓋這種任意值的情況，你還是得定義一個類名，然后撰寫對應(yīng)的 CSS：
"arbitrary-values"> ?
這種形式顯得 Tailwind 比較割裂，所以在 JIT 模式下，因?yàn)橹С职葱铇?gòu)建，所以這種任意值的形式也可以使用 Tailwind 統(tǒng)一的語法進(jìn)行書寫。
而在 v3.0 中，Tailwind 內(nèi)置了 JIT，無需在配置文件里面聲明 JIT 模式，默認(rèn)就是按需構(gòu)建、可使用任意輔助類、開發(fā)和生產(chǎn)構(gòu)建方式與產(chǎn)物統(tǒng)一，避免了不一致性、還獲得了極大的性能優(yōu)化。
所有的顏色都開箱即用
在 v3.0 之前，為了關(guān)注在開發(fā)模式下 CSS 體積的大小，Tailwind 必須要小心的限制可用的顏色，但是在 v3.0 之后，我們可以引入了很多新的調(diào)色板顏色，如 cyan（天藍(lán)色）、rose（玫瑰色）、fuchsia（紫紅色）、lime（酸橙色）以及 15 中灰色的陰影，而無需擔(dān)心日益增大的 CSS 文件體積。
支持有顏色的陰影
之前 Tailwind 想要以一種組合式的方式支持帶顏色的陰影是很困難的，雖然長期以來，用戶都在述求這一項(xiàng)功能，但是一直也沒有實(shí)現(xiàn)。經(jīng)過 5 次失敗的嘗試，最終在 Tailwind v3.0 中實(shí)現(xiàn)了這項(xiàng)功能，現(xiàn)在你可以在 Tailwind 中使用這些有顏色的陰影了：
比如下述代碼：
"bg-cyan-500?shadow-lg?shadow-cyan-500/50?...">Subscribe
"bg-blue-500?shadow-lg?shadow-blue-500/50?...">Subscribe
"bg-indigo-500?shadow-lg?shadow-indigo-500/50?...">Subscribe
可以得到如下的效果：
滾動捕捉 API
我們加入了一個完善的用于實(shí)現(xiàn) CSS 滾動捕捉模塊的輔助類集合，使得你可以直接在 HTML 里面實(shí)現(xiàn)非常豐富的滾動捕捉的效果：
什么是滾動捕捉？也就是滑動到下一個 Item 時，可以選擇滑動到此 Item 的某個位置，比如下列的定位在圖片中間。
而上面的效果只需要如下的較為簡單的 Tailwind 輔助類：
"snap-x?...">
??"snap-center?...">
????"https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/>
?? ??
????"https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/>
??
??
????"https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/>
??
