[[441172]]

大家好，我是皮湯。最近一直在研究 TailwindCSS 相關的內容，打算將其用在接下來的各種項目中，之前也寫過關于 CSS 工程化方面的文章：2021 年你需要之前的 CSS 工程化技術，今天給大家介紹一篇關于 Tailwind 最新發布的 v3.0 相關的內容。

2021 年 12 月 10 日，TailwindCSS 的創始人 Adam Wathan 宣布 TailwindCSS v3.0 正式發布，帶來了一系列性能上的改進、對開發工作流的改善以及大量的新特性。

那么這顆在 CSS 工程化領域極為耀眼的新星在 v3.0 為我們帶來了那些有趣的新特性呢?我們接下來就來一一的介紹它們。

隨時隨地的 Just-in-Time 模式

Tailwind 2.x 里面引入了一種新的模式，Just-in-Time 模式，可以保持開發和生產構建是一致的，且都是按需構建，相比之前 Tailwind 需要將所有基礎的內容進行構建來說大大提升了性能，針對任何構建工具，如 Webpack 只需要 800ms 就可以構建完成，而在之前，可能需要 30-45s。

而且得益于 JIT 模式，Tailwind 支持了 “任意值輔助類” 等一系列新的特性。

之前使用 JIT 時，需要在配置文件里面指定模式：

// tailwind.config.js 
 
module.exports = { 
 // ... 
  mode: 'jit', 
  // ... 
} 

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

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

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

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

這種形式顯得 Tailwind 比較割裂，所以在 JIT 模式下，因為支持按需構建，所以這種任意值的形式也可以使用 Tailwind 統一的語法進行書寫。

而在 v3.0 中，Tailwind 內置了 JIT，無需在配置文件里面聲明 JIT 模式，默認就是按需構建、可使用任意輔助類、開發和生產構建方式與產物統一，避免了不一致性、還獲得了極大的性能優化。

所有的顏色都開箱即用

在 v3.0 之前，為了關注在開發模式下 CSS 體積的大小，Tailwind 必須要小心的限制可用的顏色，但是在 v3.0 之后，我們可以引入了很多新的調色板顏色，如 cyan(天藍色)、rose(玫瑰色)、fuchsia(紫紅色)、lime(酸橙色)以及 15 中灰色的陰影，而無需擔心日益增大的 CSS 文件體積。

支持有顏色的陰影

之前 Tailwind 想要以一種組合式的方式支持帶顏色的陰影是很困難的，雖然長期以來，用戶都在述求這一項功能，但是一直也沒有實現。經過 5 次失敗的嘗試，最終在 Tailwind v3.0 中實現了這項功能，現在你可以在 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

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

什么是滾動捕捉?也就是滑動到下一個 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 等是用于滾動定位的設置項，而 Scroll Margin 則是用于設置相對于定位的偏移，使用形如 scroll-m{side}-{size} 這樣的格式進行設置，如 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 列布局支持，也被稱之為 “新聞版式布局” 類型，這種布局非常有用，同時應用在底部的導航欄布局設計時也是非常有用的。

如我們大多數網站底部的多列導航欄設計，以 Tailwind 官網為例：

當你使用對應的輔助類如下時：

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

你可以獲得如下的效果：

原生的表單控制樣式

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

<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-500 
        file:mr-4 file:py-2 file:px-4 
        file:rounded-full file:border-0 
        file:text-sm file:font-semibold 
        file:bg-violet-50 file:text-violet-700 
        hover: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 修飾符，使得你可以在用戶打印你的網站時如何展現：

<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 塊展示。

現代 aspect ratio API

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

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

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

上述代碼得到如下結果：

[[441174]]

好看的下劃線樣式

我們現在也支持修改下劃線的顏色、粗細等屬性了~

如下面的代碼：

<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, I 
  like 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(從做到右)等多方向布局的實驗性支持，如下代碼：

<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 (橫屏)修飾符，使得你可以通過不同的修飾符控制在對應屏幕方向上的樣式：

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

任意值輔助類支持

雖然看起來不太合理，但是我們依然添加了任意 CSS 值的 Tailwind 輔助類，并使得你可以結合 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，所以我們構建了一個 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> 

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

以上就是 TailwindCSS v3.0 更新的全部特性了，看到這里，你覺得 TailwindCSS v3.0 怎么樣呢?你做好將其用于生產、或者加入構建你下一個應用時的工具箱的準備了🐴?