Tailwind CSS v3.4：動態視口單位、:has() 支援、平衡標題、子格線等

沒有什麼比建構一個主要的新產品更能找出你希望在自己的工具中擁有的所有功能了，因此我們利用了一些靈感，將其轉化為這個 — Tailwind CSS v3.4。

一如既往，這些改進涵蓋了從你多年來一直感到惱怒的問題，到支援你甚至從未聽說過，並且可能在工作中甚至無法使用的 CSS 功能。

• 動態視口單位： 真正能在行動裝置上運作的全高度元素。
• 新的 :has() 變體： 基於子元素設定父元素的樣式。
• 使用 * 變體設定子元素的樣式： 我們可能會後悔讓你使用這個功能。
• 新的 size-* 工具類： 終於可以同時設定寬度和高度了。
• 使用 text-wrap 工具類平衡標題： 不再需要調整 max-width 或響應式換行。
• 子格線支援： 你一直難以理解的格線功能，終於在 Tailwind CSS 中實現。
• 擴展的 min-width、max-width 和 min-height 範圍： 現在 min-w-12 是一個真正的類別。
• 擴展的不透明度範圍： 在 60% 或 70% 都不太合適的時候使用。
• 擴展的 grid-rows-* 範圍： 讓它與欄範圍匹配也不錯。
• 新的 forced-colors 變體： 輕鬆為強制色彩模式微調你的網站。
• 新的 forced-color-adjust 工具類： 針對強制色彩進行更精細的微調。

所有好東西都在列表中，但請查看發行說明，以獲取一些沒有足夠令人興奮到足以在本篇文章中佔據一席之地的其他細節。

透過從 npm 安裝最新版本的 tailwindcss 來升級你的專案

npm install tailwindcss@latest

或者直接在瀏覽器中使用 Tailwind Play 嘗試所有新功能。

動態視口單位

當瀏覽器加入 vh 單位時，我們都非常興奮 — 終於有一種方法可以建構全高度的應用程式佈局，而無需在 17 層 DOM 中鑽取 height: 100%！但行動裝置及其該死的消失選單欄破壞了所有的樂趣，實際上使 vh 單位只是一個殘酷的提醒，提醒我們本可以如此美好的未來。

現在我們有了一個新的未來 — dvh、lvh 和 svh 旨在適應消失的瀏覽器框架，而 Tailwind CSS v3.4 開箱即支援它們

<div class="h-dvh">  <!-- ... --></div>

我們預設新增了以下新類別

如果你需要其他值，你也可以隨時使用任意值，例如 min-h-[75dvh]。

目前瀏覽器對這些的支援非常好，因此除非你需要支援 Safari 14，否則你可以立即開始使用它們。

新的 :has() 變體

:has() 偽類別是自 flexbox 以來加入 CSS 的最強大功能。你有史以來第一次可以根據其子元素來設定元素的樣式，而不僅僅是根據其父元素。它甚至可以根據後續的同層元素設定樣式。

這是一個範例，如果其中的單選按鈕被選中，父元素就會獲得一個彩色環

<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-500 ...">  <svg fill="currentColor">    <!-- ... -->  </svg>  Google Pay  <input type="radio" class="accent-indigo-500 ..." /></label>

在過去幾個月裡，當我們開發這個新的 UI 工具套件時，我感覺每週都會發現 :has() 的新使用案例，它取代了我們程式碼中大量的 JavaScript。

例如，我們的文字輸入在設計上相當複雜，需要一個小小的包裝元素才能建構。如果沒有 :has()，我們無法根據輸入的 :disabled 狀態等設定包裝器的樣式，但現在我們可以了

export function Input({ ... }) {  return (    <span className="has-[:disabled]:opacity-50 ...">      <input ... />    </span>  )}

這個功能非常前沿，但從今天開始，它現在已在所有主要瀏覽器的最新版本中支援。給 Firefox 使用者幾週的時間安裝今天的更新，我們應該就可以盡情使用它了。

使用 * 變體設定子元素的樣式

這裡有一個人們一直想要的功能 — 一種使用工具類別從父元素設定子元素樣式的方法。

我們新增了一個新的 * 變體來鎖定直接子元素，讓你執行以下操作

<div>  <h2>Categories:<h2>  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">    <li>Sales</li>    <li>Marketing</li>    <li>SEO</li>    <!-- ... -->  </ul></div>

一般來說，我建議直接設定子元素的樣式，但當你無法控制這些元素或需要根據元素所使用的上下文進行條件調整時，這可能會很有用。

它也可以與其他變體組合，例如 hover:*:underline 將在子元素懸停時設定任何子元素的樣式。

以下是我們在開發的新 UI 工具套件中，使用它來有條件地將佈局樣式新增至不同子元素的酷炫方法

function Field({ children }) {  return (    <div className="data-[slot=description]:*:mt-4 ...">      {children}    </div>  )}function Description({ children }) {  return (    <p data-slot="description" ...>{children}</p>  )}function Example() {  return (    <Field>      <Label>First name</Label>      <Input />      <Description>Please tell me you know your own name.</Description>    </Field>  )}

看到那個瘋狂的 data-[slot=description]:*:mt-4 類別了嗎？它首先鎖定所有直接子元素（這是 *: 部分），然後使用 data-[slot=description] 將它們過濾為僅具有 data-slot="description" 屬性的項目。

這讓您可以輕鬆地僅針對特定子元素，而無需退回到原始的任意變體。

我很期待看到大家會用這個新功能做出什麼可怕的事情，讓我後悔加入這個功能。

新的 size-* 工具類

您一定厭倦了每次需要調整頭像尺寸時都要輸入 h-5 w-5，您知道，我也知道。

在 Tailwind CSS v3.4 中，我們終於新增了一個新的 size-* 工具類，可以同時設定寬度和高度。

HTML

<div>  <img class="h-10 w-10" ...>  <img class="h-12 w-12" ...>  <img class="h-14 w-14" ...>  <img class="size-10" ...>  <img class="size-12" ...>  <img class="size-14" ...></div>

我們一直想加入這個功能，但總是在名稱上卡關 — 與 w-* 或 h-* 相比，size-* 感覺要打太多字，而 s-* 又太過難解。

不過，在使用幾週後，我可以明確地說，即使名稱比較長，它仍然比單獨的寬度和高度工具類好用太多。它超級方便，尤其是當您將其與變體結合使用或使用複雜的任意值時。

使用 text-wrap 工具類來平衡標題

您花了多少時間調整 max-width 或插入響應式換行符，以試圖讓那些小標題在您的登陸頁面上漂亮地換行？現在您不必花任何時間了，因為瀏覽器可以使用 text-wrap: balance 為您做到這點。

<article>  <h3 class="text-balance ...">Beloved Manhattan soup stand closes<h3>  <p>New Yorkers are facing the winter chill...</p></article>

我們還新增了 text-pretty，它會嘗試使用 text-wrap: pretty 來避免段落末尾出現孤立的單字。

<article class="text-pretty ...">  <h3>Beloved Manhattan soup stand closes<h3>  <p>New Yorkers are facing the winter chill...</p></article>

這些功能的好處是，即使有人使用較舊的瀏覽器訪問您的網站，它們也會退回常規的換行行為，因此今天就可以開始安全地使用這些功能。

Subgrid 支援

Subgrid 是一個相當新的 CSS 功能，它讓元素可以某種程度上繼承其父元素的網格列或網格行，使得可以將其子元素放置在父網格中。

<div class="grid grid-cols-4 gap-4">  <!-- ... -->  <div class="col-span-3 grid grid-cols-subgrid gap-4">    <div class="col-start-2">06</div>  </div>  <!-- ... --></div>

舉例來說，我們正在開發的新 UI 工具包中使用了 subgrid，例如在下拉式選單中，這樣一來，如果任何項目有圖示，所有其他項目都會縮排，以保持文字對齊。

<div role="menu" class="grid grid-cols-[auto_1fr]">  <a href="#" class="col-span-2 grid-cols-subgrid">    <svg class="mr-2">...</svg>    <span class="col-start-2">Account</span>  </a>  <a href="#" class="col-span-2 grid-cols-subgrid">    <svg class="mr-2">...</svg>    <span class="col-start-2">Settings</span>  </a>  <a href="#" class="col-span-2 grid-cols-subgrid">    <span class="col-start-2">Sign out</span>  </a></div>

當沒有任何項目有圖示時，第一欄會縮小至 0px，而文字會完全對齊至左側。

請參閱MDN 關於 subgrid 的文件以獲得完整的入門知識 — 這是一個起初有點難理解的功能，但一旦您掌握了它，它將會帶來重大的改變。

擴展的 min-width、max-width 和 min-height 比例

我們終於擴展了 min-width、max-width 和 min-height 比例，以包含完整的間距比例，因此像 min-w-12 這樣的類別現在是真的存在了。

<div class="min-w-12">  <!-- ... --></div>

我們本應該在 v3.0 就做到這一點，但一直沒有抽出時間 — 我很抱歉，不用客氣。

擴展的不透明度比例

我們還擴展了不透明度比例，以包含現成的每 5 個步驟。

<div class="opacity-35">  <!-- ... --></div>

希望這意味著您的標記中會減少一些任意值。我接下來要處理 2.5% 了。

擴展的 grid-rows-* 比例

我們也將內建的網格列數量從 6 個增加到 12 個，何樂而不為呢。

<div class="grid grid-rows-9">  <!-- ... --></div>

也許我們會在下一個版本中變得更加瘋狂，將其增加到 16 個。

新的 forced-colors 變體

您是否聽過強制色彩模式？您的網站在其中看起來可能很糟糕。

現在您至少不能怪我們了，因為 Tailwind CSS v3.4 包含了 forced-colors 變體，用於調整強制色彩模式的樣式。

<form>  <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." /></form>

它對於微調完全自訂的控制項非常有用，尤其是與任意值和CSS 系統顏色的實用知識結合使用時。

新的 forced-color-adjust 工具類

我們還新增了新的 forced-color-adjust-auto 和 forces-color-adjust-none 工具類，以控制強制色彩模式如何影響您的設計。

<fieldset>  <legend>Choose a color</legend>  <div class="forced-color-adjust-none ...">    <label>      <input class="sr-only" type="radio" name="color-choice" value="white" />      <span class="sr-only">White</span>      <span class="size-6 rounded-full bg-white"></span>    </label>    <label>      <input class="sr-only" type="radio" name="color-choice" value="gray" />      <span class="sr-only">Gray</span>      <span class="size-6 rounded-full bg-gray-300"></span>    </label>    <!-- ... -->  </div></fieldset>

這些應該非常謹慎地使用，但當某些東西必須以特定顏色呈現時，它們可能會很有用，例如在線上商店中選擇某人正在購買的商品的顏色。

要瞭解更多關於所有這些強制色彩的資訊，我建議您閱讀 Polypane 部落格上的「強制色彩解釋：實用指南」 — 這是迄今為止我發現關於此主題最有用的文章。

如果您一直密切關注，您可能會想知道Oxide，這是我們在今年夏天Tailwind Connect上預覽的引擎改進。

我們原本計劃在 v3.4 中加入這些改進，但我們還有一些事情需要解決，而且其他這些改進已經累積了很多，因此我們認為將其全部發佈出來，而不是將其擱置，是更有意義的。Oxide 的內容仍在開發中，它將成為新年下一個 Tailwind CSS 版本的主要改進。

同時，請使用 npm 更新到最新版本，以深入瞭解 Tailwind CSS v3.4。

$ npm install tailwindcss@latest

有了 :has() 和新的 * 變體，您的 HTML 即將變得比以往任何時候都更失控。