Tailwind CSS v1.5.0

我本來希望把 v1.5.0 保留給一些真正令人興奮的東西，但我們需要一個新功能來支援新的 @tailwindcss/typography 外掛程式，所以就這樣吧，我們提前給你們一些新東西。

沒有重大變更，這是一個小版本發布，我們是專業人士，別傻了。

新功能

在 Tailwind CSS v1.5.0 之前，只有「工具」類別真正打算與 variants (如「responsive」、「hover」、「focus」等) 一起使用。

雖然這些對於工具類別仍然比任何其他類別類型更有用，但我們現在也支援為元件類別產生變體，例如新的 @tailwindcss/typography 外掛程式中的 prose 類別。

<article class="prose md:prose-lg">  <!-- Content --></article>

您可以使用 addComponents 外掛程式 API 的第二個參數中的新 variants 選項，在您自己的元件類別中利用此功能。

plugin(function ({ addComponents })) {  addComponents({    '.card': {      // ...    }  }, {    variants: ['responsive']  })})

...或使用您可能從 addUtilities API 熟悉的陣列簡寫。

plugin(function ({ addComponents })) {  addComponents({    '.card': {      // ...    }  }, ['responsive'])})

為了在您的自訂 CSS 中利用這些功能（而不是使用外掛程式 API），您可以使用新的 @layer 指令明確告訴 Tailwind 您的樣式屬於「元件」類別。

@layer components {  @responsive {    .card {      /* ... */    }  }}

這有助於 Tailwind 正確清除您未使用的 CSS，確保在使用預設「保守」清除模式時，不會移除任何響應式元件變體。

在新的元件 variants 支援的基礎上，container 類別現在支援變體！

<!-- Only lock the width at `md` sizes and above --><div class="md:container">  <!-- ... --></div>

我們預設已啟用響應式變體，但如果您頭腦發熱，您也可以手動啟用其他變體，如 focus、group-hover 等。

module.exports = {  // ...  variants: {    container: ["responsive", "focus", "group-hover"],  },};

我們使用新的 focus-visible 變體新增了對 :focus-visible 偽類別的支援。

這對於新增僅對鍵盤使用者顯示，且對滑鼠使用者忽略的焦點樣式非常有用。

<button class="focus-visible:shadow-outline focus-visible:outline-none ...">Click me</button>

預設情況下不會啟用任何功能，但您可以在配置檔案的 variants 區段中啟用它。

module.exports = {  // ...  variants: {    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],  },};

瀏覽器支援在這方面仍然相當薄弱，但正在改善。同時，如果您想立即在所有瀏覽器中使用此功能，請查看 polyfill 和相應的 PostCSS 外掛程式。

我們新增了一個新的 checked 變體，您可以用於有條件地設定諸如核取方塊和單選按鈕之類的樣式。

<input type="checkbox" class="bg-white checked:bg-blue-500" />

預設情況下不會啟用任何功能，但您可以在配置檔案的 variants 區段中啟用它。

module.exports = {  // ...  variants: {    backgroundColor: ["responsive", "hover", "focus", "checked"],  },};

想討論這篇文章嗎？在 GitHub 上討論 →