Tailwind CSS v3.2：動態斷點、多重配置和容器查詢，我的天啊！

Tailwind CSS v3.2 帶著大量新功能來了，包括支援動態斷點、單一專案中的多個設定檔、巢狀群組、參數化變體、容器查詢等等。

和往常一樣，查看發行說明，了解每個細節的修復和改進，但這裡有一些重點。

• 使用 @config 在一個專案中設定多個設定檔

• 使用 supports-* 的基於瀏覽器支援的樣式
• ARIA 屬性變體
• 資料屬性變體
• 最大寬度和動態斷點
• 具有 group-* 和 peer-* 的動態變體
• 使用 matchVariant 的動態變體

• 使用變體修飾符的巢狀 group 和多個 peer 支援

• 容器查詢

從 npm 安裝最新版本的 tailwindcss 來升級您的專案

npm install -D tailwindcss@latest

或在 Tailwind Play 中體驗新功能，您可以在瀏覽器中立即嘗試所有功能。

使用 @config 在一個專案中設定多個設定檔

我們新增了一個新的 @config 指令，您可以在 CSS 檔案中使用它來指定該檔案要使用的 Tailwind CSS 設定。

@config "./tailwind.admin.config.js";@tailwind base;@tailwind components;@tailwind utilities;

這讓在單一專案中建立多個具有不同 Tailwind 配置的樣式表變得更加容易。例如，您可能有一個用於網站面向客戶部分的設定檔，另一個用於管理/後端區域的設定檔。

從技術上講，您一直可以使用足夠的 webpack 魔法來做到這一點，但新的 @config 指令讓每個人都可以輕鬆存取，即使在您無法控制建置工具設定的專案中也是如此。

使用 supports-* 的基於瀏覽器支援的樣式

您現在可以使用 supports-[...] 變體，根據使用者瀏覽器中是否支援特定功能來有條件地設定樣式，這會在底層產生 @supports 規則。

<div class="flex supports-[display:grid]:grid ...">  <!-- ... --></div>

supports-[...] 變體會將您在方括號之間使用的任何 @supports (...) 內容 (例如屬性/值對，甚至是使用 and 和 or 的運算式) 作為引數。

如果您只需要檢查是否支援屬性本身，您甚至可以只指定屬性名稱，Tailwind 會為您填補空白。

<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">  <!-- ... --></div>

ARIA 屬性變體

您現在可以使用新的 aria-* 變體，根據 ARIA 屬性有條件地設定樣式。

例如，您可以根據 aria-checked 狀態是否為 true 來更新元素的背景顏色。

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">  <!-- ... --></span>

預設情況下，我們加入了最常見的布林 ARIA 屬性的修飾符

您可以透過編輯 tailwind.config.js 檔案中的 theme.aria 或 theme.extend.aria 來客製化可用的 aria-* 修飾符。

module.exports = {  theme: {    extend: {      aria: {        asc: 'sort="ascending"',        desc: 'sort="descending"',      },    },  },};

如果您需要使用不適合包含在主題中的一次性 aria 修飾符，或者對於採用特定值的更複雜 ARIA 屬性，請使用方括號來使用任何任意值動態產生屬性。

<table>  <thead>    <tr>      <th        aria-sort="ascending"        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"      >        Invoice #      </th>      <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

ARIA 狀態修飾符也可以使用 group-aria-* 和 peer-aria-* 修飾符來定位父元素和同層元素。

<table>  <thead>    <tr>      <th aria-sort="ascending" class="group">        Invoice #        <svg          class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"        >          <!-- ... -->        </svg>      </th>      <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

資料屬性變體

您現在可以使用新的 data-* 變體，根據 data 屬性有條件地設定樣式。

由於根據定義，沒有標準的 data-* 屬性，因此我們僅支援開箱即用的任意值，例如

<!-- Will apply --><div data-size="large" class="data-[size=large]:p-8">  <!-- ... --></div><!-- Will not apply --><div data-size="medium" class="data-[size=large]:p-8">  <!-- ... --></div><!-- Generated CSS --><style>  .data-\[size\=large\]\:p-8[data-size="large"] {    padding: 2rem;  }</style>

您可以在 tailwind.config.js 檔案的 theme 區段中的 data 鍵下，設定專案中常用的資料屬性選取器的捷徑。

// tailwind.config.jsmodule.exports = {  theme: {    data: {      checked: 'ui~="checked"',    },  },  // ...};

<div data-ui="checked active" class="data-checked:underline">  <!-- ... --></div>

這些變體也像框架中的許多其他變體一樣，可以作為 group-* 和 peer-* 變體運作。

<div data-size="large" class="group">  <div class="group-data-[size=large]:p-8">    <!-- Will apply `p-8` -->  </div></div><div data-size="medium" class="group">  <div class="group-data-[size=large]:p-8">    <!-- Will not apply `p-8` -->  </div></div>

最大寬度和動態斷點

我們新增了一個新的 max-* 變體，可讓您根據設定的斷點套用最大寬度媒體查詢。

<div class="max-lg:p-8">  <!-- Will apply `p-8` until the `lg` breakpoint kicks in --></div>

作為一般規則，我仍然建議個人使用最小寬度斷點，但此功能確實開啟了一個有用的工作流程優勢，即不必在不同的斷點取消某些樣式。

例如，如果沒有此功能，您通常最終會執行以下操作

<div class="md:sr-only xl:not-sr-only">  <!-- ... --></div>

有了此功能，您可以透過在原始宣告中堆疊 max-* 變體來避免取消該樣式。

<div class="md:max-xl:sr-only">  <!-- ... --></div>

此外，我們新增了對任意值的支援，以及一個僅接受任意值的新 min-* 變體，因此您可以執行以下操作

<div class="min-[712px]:max-[877px]:right-16 ...">  <!-- ... --></div>

重要的是要注意，這些功能只有在您的專案使用簡單的 screens 設定時才可用。

由於需要確保所有這些媒體查詢在最終 CSS 中的排序方式，使其在瀏覽器中提供預期的行為，因此這些功能比它們看起來要複雜得多。因此，目前，它們僅在您的 screens 設定是一個簡單的具有字串值的物件（如預設設定）時才可運作。

// tailwind.config.jsmodule.exports = {  theme: {    screens: {      sm: "640px",      md: "768px",      lg: "1024px",      xl: "1280px",      "2xl": "1536px",    },  },};

如果您有複雜的設定，其中已經定義了 max-width 斷點、基於範圍的媒體查詢，或任何其他非單純字串的東西，這些功能將無法使用。我們未來或許可以解決這個問題，但這會產生太多關於 CSS 應該如何排序的問題，而我們目前還沒有答案。

所以目前（而且可能永遠如此），如果您想使用這些功能，您的 screens 設定需要很簡單。我希望這些功能能讓複雜的 screens 設定變得不必要。

動態 group-* 和 peer-* 變體

現在可以通過在方括號之間傳遞您自己的選擇器來“groupify”或“peerify”，動態創建自定義的 group-* 和 peer-* 變體。

<div class="group is-published">  <div class="group-[.is-published]:block hidden">Published</div></div>

為了更精細的控制，您可以使用 & 字元來標記 .group 或 .peer 相對於您傳遞的選擇器，應該在最終選擇器中出現的位置。

<div>  <input type="text" class="peer" />  <div class="peer-[:nth-of-type(3)_&]:block hidden">    <!-- ... -->  </div></div>

說實話，您可能一生只會使用這些功能三次，但它仍然很酷。希望我們可以將此作為基礎，讓 group 和 peer 在未來更自動地與第三方插件註冊的變體一起使用。

使用 matchVariant 的動態變體

您可能已經注意到許多新功能中出現的這種新的 variant-[...] 語法 — 這一切都由新的 matchVariant 插件 API 提供支援，該 API 可以創建我們稱之為「動態變體」的東西。

以下是一個為某個虛構的工具提示庫創建 placement-* 變體的範例，該工具提示庫使用 data-placement 屬性來告知您目前工具提示的位置。

let plugin = require("tailwindcss/plugin");module.exports = {  // ...  plugins: [    plugin(function ({ matchVariant }) {      matchVariant(        "placement",        (value) => {          return `&[data-placement=${value}]`;        },        {          values: {            t: "top",            r: "right",            b: "bottom",            l: "left",          },        },      );    }),  ],};

上面定義的變體會給您像 placement-t 和 placement-b 這樣的變體，但也會支援方括號中的任意部分。因此，如果這個虛構的工具提示庫有其他您認為不需要創建內建值的潛在值，您仍然可以像這樣做。

<div class="placement-[top-start]:mb-2 ...">  <!-- ... --></div>

使用此 API 定義自定義變體時，重要的是您可以控制 CSS 的生成順序，以確保每個類別對於來自相同變體的其他值具有正確的優先順序。為了支援這一點，在定義變體時，您可以提供一個 sort 函式。

matchVariant("min", (value) => `@media (min-width: ${value})`, {  sort(a, z) {    return parseInt(a) - parseInt(z);  },});

使用變體修飾符支援巢狀群組和多個 peer

有時，當您有多個相互巢狀的 group 區塊時，可能會遇到問題，因為 Tailwind 沒有真正的方法來區分它們。

為了解決這個問題，我們正在新增對變體修飾符的支援，這是一個新的動態區塊，您可以將其添加到變體的末尾（靈感來自我們的可選不透明度修飾符語法），您可以使用它來為每個群組/peer 提供您自己的識別符。

以下是它的樣子

<div class="group/sidebar ...">  <!-- ... -->  <div class="group/navitem ...">    <a href="#" class="opacity-50 group-hover/navitem:bg-black/75 group-hover/sidebar:opacity-75">      <!-- ... -->    </a>  </div>  <!-- ... --></div>

這讓您可以為每個群組提供一個清晰的名稱，使其在該上下文中具有意義，而 Tailwind 將生成必要的 CSS 使其工作。

我真的很高興能為此提供一個解決方案，因為這是我多年來一直嘗試尋找良好解決方案的問題，而這是我們提出的第一個真正感覺能提供我認為它應該具有的強大功能和靈活性的方案。

容器查詢

我簡直不敢相信，但容器查詢終於成為現實，而且瀏覽器對它們的支援已經非常接近可以將其用於生產環境的程度了 — 事實上，如果您正在構建一個 Electron 應用程式，您今天就可以使用它們。

今天，我們正在發布 @tailwindcss/container-queries，這是一個新的第一方插件，它使用新的 @ 語法來區分它們與普通的媒體查詢，從而將容器查詢支援添加到框架中。

<div class="@container">  <div class="block @lg:flex">    <!-- ... -->  </div></div>

我們開箱即用地包含了一組與我們的預設 max-width 刻度匹配的容器大小。

您可以使用 tailwind.config.js 文件中的 containers 鍵來配置哪些值可用。

// tailwind.config.jsmodule.exports = {  theme: {    extend: {      containers: {        2xs: '16rem',        // etc...      },    },  },};

我們也支援使用 @[...] 語法的任意值。

<div class="@container">  <div class="block @[618px]:flex">    <!-- ... -->  </div></div>

...以及使用我們現在為 group-* 和 peer-* 變體提供的相同變體修飾符語法的命名容器。

<div class="@container/main">  <!-- ... -->  <div>    <div class="block @lg/main:flex">      <!-- ... -->    </div>  </div></div>

目前，我們從基於簡單的 min-width 的容器查詢開始，但我們計劃隨著時間的推移擴大範圍，並且當我們覺得我們真正掌握了 API 時，我們會將它們全部整合到核心中。

有關完整的文件，請查看 GitHub 上的插件 。

就是這樣 — Tailwind CSS v3.2！重大改進，但只是小版本變更，因此沒有任何重大變更，您應該能夠通過更新您的依賴項來更新您的專案。

npm install -D tailwindcss@latest

是的，我聽到您在後面說，仍然沒有文字陰影，但是嘿，至少您可以在不離開 HTML 的情況下，在複選框的父元素是列表中的第三個子元素時，設定複選框兄弟元素的樣式。優先事項，各位。