作者 | 一只圖雀

來源 | 程序員巴士

今天給大家介紹一篇關(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.jsmodule.exports?=?{//?...mode:?'jit',//?... }

然后你就可以享受到極快的構(gòu)建速度，而且可以使用任意值的輔助類，如：

<div?class="top-[-113px]"></div>

這在之前的 Tailwind 版本中是不允許的，如果需要覆蓋這種任意值的情況，你還是得定義一個類名，然后撰寫對應(yīng)的 CSS：

<div?class="arbitrary-values"></div><style> .arbitrary-values?{top:?-113px; } </style>

這種形式顯得 Tailwind 比較割裂，所以在 JIT 模式下，因為支持按需構(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 想要以一種組合式的方式支持帶顏色的陰影是很困難的，雖然長期以來，用戶都在述求這一項功能，但是一直也沒有實(shí)現(xiàn)。經(jīng)過 5 次失敗的嘗試，最終在 Tailwind v3.0 中實(shí)現(xiàn)了這項功能，現(xiàn)在你可以在 Tailwind 中使用這些有顏色的陰影了：

比如下述代碼：

<button?class="bg-cyan-500?shadow-lg?shadow-cyan-500/50?...">Subscribe</button> <button?class="bg-blue-500?shadow-lg?shadow-blue-500/50?...">Subscribe</button> <button?class="bg-indigo-500?shadow-lg?shadow-indigo-500/50?...">Subscribe</button>

可以得到如下的效果：

滾動捕捉 API

我們加入了一個完善的用于實(shí)現(xiàn) CSS 滾動捕捉模塊的輔助類集合，使得你可以直接在 HTML 里面實(shí)現(xiàn)非常豐富的滾動捕捉的效果：

什么是滾動捕捉？也就是滑動到下一個 Item 時，可以選擇滑動到此 Item 的某個位置，比如下列的定位在圖片中間。

而上面的效果只需要如下的較為簡單的 Tailwind 輔助類：

<div?class="snap-x?..."><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="snap-center?..."><img?src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div> </div>

在一個 snap 容器里，snap-center、snap-start 等是用于滾動定位的設(shè)置項，而 Scroll Margin 則是用于設(shè)置相對于定位的偏移，使用形如 scroll-m{side}-{size} 這樣的格式進(jìn)行設(shè)置，如 scroll-ml-6 ，則是相對左邊再偏移 6 個單位的長度：

<div?class="snap-x?..."><div?class="scroll-ml-6?snap-start?..."><img?src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="scroll-ml-6?snap-start?..."><img?src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="scroll-ml-6?snap-start?..."><img?src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="scroll-ml-6?snap-start?..."><img?src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div><div?class="scroll-ml-6?snap-start?..."><img?src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"?/></div> </div>

如上述代碼，snap-center 則會在滾動的時候定位在圖片的開始位置，而加了 scroll-ml-6 之后，會再相對左邊偏移 6 個單位，變成如下效果：

多列布局

我們加入了 columns 列布局支持，也被稱之為 “新聞版式布局” 類型，這種布局非常有用，同時應(yīng)用在底部的導(dǎo)航欄布局設(shè)計時也是非常有用的。

如我們大多數(shù)網(wǎng)站底部的多列導(dǎo)航欄設(shè)計，以 Tailwind 官網(wǎng)為例：

當(dāng)你使用對應(yīng)的輔助類如下時：

<div?class="columns-1?sm:columns-3?..."><p>...</p><!--?...?--> </div>

你可以獲得如下的效果：

原生的表單控制樣式

我們加入了對 CSS accent-color 屬性的支持，如為表單里面的文件輸入框按鈕添加樣式，這使得你能夠細(xì)粒度的為原生的表單控制按鈕添加樣式，如下代碼：

<form><div?class="flex?items-center?space-x-6"><div?class="shrink-0"><img?class="h-16?w-16?object-cover?rounded-full"?src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"?alt="Current?profile?photo"?/></div><label?class="block"><span class="sr-only">Choose?profile?photo</span><input?type="file"?class="block?w-full?text-sm?text-gray-500file:mr-4?file:py-2?file:px-4file:rounded-full?file:border-0file:text-sm?file:font-semiboldfile:bg-violet-50?file:text-violet-700hover:file:bg-violet-100"/></label></div><label?class="mt-6?flex?items-center?justify-center?space-x-2?text-sm?font-medium?text-gray-600"><input?type="checkbox"?class="accent-violet-500"?checked/><span>Yes,?send?me?all?your?stupid?updates</span></label> </form>

可以獲得如下效果：

為選擇文件前：

選擇文件后：

打印修飾符

我們添加了 print 修飾符，使得你可以在用戶打印你的網(wǎng)站時如何展現(xiàn)：

<div><article?class="print:hidden"><h1>My?Secret?Pizza?Recipe</h1><p>This?recipe?is?a?secret,?and?must?not?be?shared?with?anyone</p><!--?...?--></article><div?class="hidden?print:block">Are?you?seriously?trying?to?print?this??It's?secret!</div> </div>

比如上述的代碼邏輯為，在打印模式下，第一個 article 塊不展示，而 div 塊展示。

現(xiàn)代 aspect ratio API

我們添加了原生的 aspect ratio ****屬性的支持，因為現(xiàn)在瀏覽器的支持度已經(jīng)非常高了，即我們可以獲得比較完美的橫縱比。

比如如下代碼，可以設(shè)置視頻的最佳橫縱比：

<iframe?class="w-full?aspect-video?..."?src="https://www.youtube.com/..."></iframe>

上述代碼得到如下結(jié)果：

好看的下劃線樣式

我們現(xiàn)在也支持修改下劃線的顏色、粗細(xì)等屬性了~

如下面的代碼：

<p>I’m?Derek,?an?astro-engineer?based?in?Tatooine.?I?like?to?build?X-Wings?at<a?href="#"?class="underline?decoration-sky-500?decoration-2">My?Company,?Inc</a>.?Outside?of?work,?Ilike?to?<a?href="#"?class="underline?decoration-pink-500?decoration-dotted?decoration-2">watch?pod-racing</a>and?have?<a?href="#"?class="underline?decoration-indigo-500?decoration-wavy?decoration-2">light-saber</a>fights. </p>

可以得到如下的效果：

RTL 與 LTR 修飾符

我們也加入了對 RTL（從右到左）與 LTR（從做到右）等多方向布局的實(shí)驗性支持，如下代碼：

<div?class="group?flex?items-center"><img?class="shrink-0?h-12?w-12?rounded-full"?src="..."?alt=""?/><div?class="ltr:ml-3?rtl:mr-3"><p?class="text-sm?font-medium?text-gray-700?group-hover:text-gray-900">...</p><p?class="text-sm?font-medium?text-gray-500?group-hover:text-gray-700">...</p></div> </div>

可以獲得如下效果：

Portrait 與 Landscape 修飾符

我們也添加了在不同屏幕方向的修飾符支持，如 portrait （豎屏）、landscape （橫屏）修飾符，使得你可以通過不同的修飾符控制在對應(yīng)屏幕方向上的樣式：

<div><div?class="portrait:hidden"><!--?...?--></div><div?class="landscape:hidden"><p>This?experience?is?designed?to?be?viewed?in?landscape.?Please?rotate?yourdevice?to?view?the?site.</p></div> </div>

任意值輔助類支持

雖然看起來不太合理，但是我們依然添加了任意 CSS 值的 Tailwind 輔助類，并使得你可以結(jié)合 hover 、lg 等修飾符使用：

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

或者像 56px 或者 44px 這種任意值，與 lg 修飾符一起使用：

<div?class="[--scroll-offset:56px]?lg:[--scroll-offset:44px]"><!--?...?--> </div>

使用 CDN 來使用 Tailwind

目前沒有一個很好的基于 CSS 的 CDN 方式來使用 Tailwind CSS v3.0，所以我們構(gòu)建了一個 JavaScript 庫來幫助你使用它：

<!DOCTYPE?html> <html?lang="en"><head><meta?charset="utf-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/><title>Example</title><script?src="https://cdn.tailwindcss.com/"></script></head><body><!--?--></body> </html>

這種方式僅限于在開發(fā)環(huán)境下使用，或者當(dāng)你想構(gòu)建一個 demo 或者想要嘗試一個有趣的想法時，你可以這樣使用。只需要在任何想要使用 Tailwind 特性的 HTML 文檔里添加 script 標(biāo)簽來引用 https://cdn.tailwindcss.com/ 即可。

以上就是 TailwindCSS v3.0 更新的全部特性了，看到這里，你覺得 TailwindCSS v3.0 怎么樣呢？你做好將其用于生產(chǎn)、或者加入構(gòu)建你下一個應(yīng)用時的工具箱的準(zhǔn)備了🐴？

往期推薦

虛幻引擎5上的《黑客帝國》全新體驗，愛了愛了

元宇宙真的是割韭菜嗎？

Redis會遇到的坑，你踩過幾個？

核彈級漏洞，把log4j扒給你看！

點(diǎn)分享

點(diǎn)收藏

點(diǎn)點(diǎn)贊

點(diǎn)在看

總結(jié)

以上是生活随笔為你收集整理的TailwindCSS v3.0 正式发布！一大波新特性来袭！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。