Tailwind CSS v3.3：擴展的色彩調色盤、ESM/TS 支援、邏輯屬性等等

Tailwind CSS v3.3 登場 — 帶來了一系列人們一直以來要求的全新功能，以及許多您甚至不知道自己想要的新東西。

• 擴展的更深暗色調色盤： 每個顏色都有新的更深 950 色調。
• ESM 和 TypeScript 支援： 使用 ESM 或 TypeScript 編寫您的設定檔。
• 使用邏輯屬性簡化 RTL 支援： 建立可適應不同方向的版面配置。
• 微調漸層色彩停止位置： 精確指定您希望每個色彩停止點的位置。
• 開箱即用的行數限制： 無需外掛即可截斷多行文字。
• 新的行高縮寫： 使用一個類別設定您的字體大小和行高。
• 沒有 var() 的 CSS 變數：任意值的新縮寫語法。
• 可設定的 font-variation-settings： 直接內建到您的 font-* 公用程式中。
• 新的 list-style-image 公用程式： 這樣您就可以使用可怕的美術剪貼圖來做項目符號。
• 新的 hyphens 公用程式： 用於微調斷字行為。
• 新的 caption-side 公用程式： 以樣式為您的表格加上標題。

這涵蓋了最令人興奮的東西，但請查看發行說明，以取得自上次發行以來我們所做的每一項小改進的詳盡清單。

升級您的專案就像從 npm 安裝最新版本的 tailwindcss 一樣容易

npm install -D tailwindcss@latest

您也可以直接在瀏覽器中於 Tailwind Play 上試用所有新功能。

擴展的更深暗色調色盤

多年來，我們收到的最常見的功能要求之一是為每個顏色新增更深的色調 — 通常是因為有人正在建立深色 UI，只是想要在光譜的黑暗端有更多選項。

好，願望實現了 — 在 Tailwind CSS v3.3 中，我們為每個顏色新增了一個新的 950 色調。

在灰色中，它們基本上充當帶有色彩的黑色，這對於超深色 UI 非常有用

而在其餘的色彩光譜中，我們針對高對比文字和有色彩的控制背景優化了 950

信不信由你，這個專案最困難的部分是說服自己接受每個顏色有 11 個色調。試圖在色彩調色盤文件中讓它看起來不錯是一場噩夢。

也為我們以前可以開的 50 種灰色笑話哀悼一下。

ESM 和 TypeScript 支援

現在您可以在 ESM 中，甚至在 TypeScript 中設定 Tailwind CSS

/** @type {import('tailwindcss').Config} */export default {  content: [],  theme: {    extend: {},  },  plugins: [],};

當您執行 npx tailwindcss init 時，我們會偵測您的專案是否為 ES 模組，並自動使用正確的語法產生您的設定檔。

您也可以使用 --esm 旗標明確產生 ESM 設定檔

npx tailwindcss init --esm

若要產生 TypeScript 設定檔，請使用 --ts 旗標

npx tailwindcss init --ts

許多人認為這很容易，因為他們已經在 ESM 中編寫自己的程式碼（即使它正在被他們的建置工具轉譯），但實際上這非常棘手 — 我們實際上必須動態地為您轉譯設定檔。

當您想到 TypeScript 的情況時，比較容易理解為什麼會發生這種情況，因為 Tailwind 當然是以 JavaScript 形式發行的，並且它無法神奇地匯入未編譯的 TypeScript 檔案。

我們在底層使用出色的 jiti 函式庫來處理此問題，並使用 Sucrase 來轉譯程式碼，以獲得最佳效能，同時保持安裝佔用空間小。

使用邏輯屬性簡化 RTL 支援

我們已經可以透過 LTR 和 RTL 變體來設定多方向網站的樣式一段時間了，但現在您可以使用邏輯屬性更輕鬆和自動地進行大部分樣式設定。

使用像 ms-3 和 me-3 等新的公用程式，您可以設定元素的開始和結束樣式，以便您的樣式在 RTL 中自動調整，而不是編寫像 ltr:ml-3 rtl:mr-3 的程式碼

由左至右

Tom Cook

營運總監

由右至左

تامر كرم

الرئيس التنفيذي

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

我們為 inset、margin、padding、border-radius、scroll-margin 和 scroll-padding 新增了新的邏輯屬性公用程式。

以下是我們新增的所有新公用程式及其對應的完整清單

如果您經常建置需要支援 LTR 和 RTL 語言的網站，這些應該可以為您節省大量的程式碼，而且當您需要更多控制權時，您可以隨時將它們與 ltr 和 rtl 變體結合使用。

微調漸層色彩停止位置

我們新增了像 from-5%、via-35% 和 to-85% 等新的公用程式，可讓您調整漸層中每個色彩停止點的實際位置

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">  <!-- ... --></div>

我們已預先加入了從 0% 到 100%，以 5 為間隔的所有值，但您當然可以使用任意值來獲得您想要的效果。

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">  <!-- ... --></div>

更多詳細資訊，請參閱漸層顏色停止點文件。

內建的行數限制 (Line-clamp)

我們在兩年多前發布了官方的 line-clamp 外掛，即使它使用了一堆奇怪的、已棄用的 -webkit-* 屬性，但它在每個瀏覽器中都能運作，而且會永遠有效，因此我們決定將它直接整合到框架本身中。

2020 年 3 月 10 日

提升您的轉換率

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Lindsay Walton

<article>  <div>    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>    <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2>    >    <p class="mt-4 line-clamp-3 text-sm/6 text-gray-600">      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut      sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur      fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis      deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit      consectetur enim.    </p>  </div>  <div class="mt-4 flex gap-x-2.5 text-sm leading-6 font-semibold text-gray-900">    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />    Lindsay Walton  </div></article>

因此，當您升級到 v3.3 時，如果您之前有使用 line-clamp 外掛，可以安全地將其移除。

module.exports = {  // ...  plugins: [    require('@tailwindcss/line-clamp')   ]}

外掛，慢走不送。

如果您之前沒有使用過，請參閱新的line-clamp 文件，以了解更多關於其運作方式的資訊。

新的字型大小工具的行高縮寫

我們多年來使用 Tailwind 設計精美物件時發現，我們幾乎從未在不同時設定字型大小的情況下設定行高。

因此，受到我們顏色不透明度修飾符語法的啟發，我們決定讓您可以使用單一工具同時設定它們，以節省一些字元。

<p class="text-lg leading-7 ..."><p class="text-lg/7 ...">  So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way  past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living  things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.</p>

您可以使用在您的行高比例中定義的任何值，或者如果需要偏離您的設計標記，可以使用任意值。

<p class="text-sm/[17px] ..."></p>

請參閱字型大小文件，以取得更多範例。

不含 var() 的 CSS 變數

為了減少輸入，我們也讓您可以在使用 CSS 變數作為任意值時省略 var()。

export function MyComponent({ company }) {  return (    <div      style={{        "--brand-color": company.brandColor,        "--brand-hover-color": company.brandHoverColor,      }}      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"    />  );}

順便一提，這是一個相當酷的技巧，可以用於將來自資料庫或其他來源的樣式與 hover: 之類的屬性搭配使用。

為自訂字型系列設定 font-variation-settings

使用自訂字型時，您通常會想要設定 font-feature-settings 或 font-variation-settings 之類的選項，以選擇加入字型提供的特定調整。

我們已讓您在一段時間內可以輕鬆地對 font-feature-settings 執行此操作，但現在您也可以對 font-variation-settings 執行相同的操作，方法是在您 config 檔案中的字型列表之後加入類似選項的物件。

module.exports = {  theme: {    fontFamily: {      sans: [        "Inter var, sans-serif"        {          fontFeatureSettings: '"cv11", "ss01"',          fontVariationSettings: '"opsz" 32',        },      ],    },  },};

在上面的範例中，我們使用的是最近發布的 Inter，它支援使用光學尺寸軸來觸發字型的「顯示」變體，此變體針對較大的尺寸（例如標題）進行了最佳化。

新的 list-style-image 工具

曾經想用胡蘿蔔的圖片作為列表項目標記嗎？現在您可以使用新的 list-image-* 工具了。

<ul class="list-image-[url(/carrot.png)] ...">  <li>5 cups chopped Porcini mushrooms</li>  <!-- ... --></ul>

我們不會開始在框架中附上蔬菜剪貼畫，但您可以使用任何您想要的圖片，作為任意值或在主題的 listStyleImage 區段中進行設定。

請參閱列表樣式圖片文件以了解更多資訊。

新的 hyphens 工具

您聽過 ­ HTML 實體嗎？直到我們加入對這些 hyphens-* 工具的支援之前，我也不知道。

使用 hyphens-manual 和仔細放置的 ­，您可以告訴瀏覽器在需要將單字跨越多行時在哪裡插入連字符。

<p class="hyphens-manual ...">... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</p>

也許像這樣的程式碼片段對於加入您難以發音的死亡金屬樂隊新聞稿中會很有用，這樣記者就不會在最終讓您在舞台上走紅的文章中搞砸連字符。

請參閱連字符文件以了解更多資訊。

新的 caption-side 工具

另一個我剛接觸的新東西 - <caption> 元素！我們有新的 caption-* 工具，您可以在表格標題上使用它們來控制它們出現在表格頂部還是底部。

<table>  <caption class="caption-bottom">    Table 3.1: Professional wrestlers and their signature moves.  </caption>  <thead>    <tr>      <th>Wrestler</th>      <th>Signature Move(s)</th>    </tr>  </thead>  <tbody>    <tr>      <td>"Stone Cold" Steve Austin</td>      <td>Stone Cold Stunner, Lou Thesz Press</td>    </tr>    <tr>      <td>Bret "The Hitman" Hart</td>      <td>The Sharpshooter</td>    </tr>    <tr>      <td>Razor Ramon</td>      <td>Razor's Edge, Fallaway Slam</td>    </tr>  </tbody></table>

請參閱標題側文件以取得更多範例。

這就是 Tailwind CSS v3.3！沒有任何重大變更，只是一堆有趣的新東西。立即在您的專案中試試看，方法是使用 npm 更新到最新版本。

npm install -D tailwindcss@latest

沒錯，又是一個沒有 text-shadow 工具的版本。還記得《宋飛正傳》中克萊默試圖看看他可以開車多遠而不用停下來加油的那一集嗎？那是我最喜歡的一集。