文件組件部落格展示

Tailwind CSS v1.7.0

Adam Wathan

又一個新的 Tailwind 版本發布了！這次支援漸層、背景剪裁、實驗性支援使用 @apply 搭配變體工具，以及更多功能。讓我們深入了解一下！

新功能

漸層

這次發布的重點功能 — Tailwind 現在內建支援背景漸層！

漸層的設計採用高度可組合的 API，預設允許您在 8 個方向中的一個指定最多三個顏色停靠點

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">  <!-- ... --></div>

這得益於新的 backgroundImage 核心外掛程式（您可以使用它來處理任何您喜歡的背景圖片！）和新的 gradientColorStops 核心外掛程式。

這些外掛程式的預設設定如下

tailwind.config.js
module.exports = {  theme: {    backgroundImage: {      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",    },    gradientColorStops: (theme) => theme("colors"),  },  variants: {    backgroundImage: ["responsive"],    gradientColorStops: ["responsive", "hover", "focus"],  },};

瞭解更多原始的 pull request。

新的 background-clip 工具

我們還新增了一個新的 backgroundClip 核心外掛程式，您可以使用它來控制背景在元素內的渲染方式。

它包含 4 個新的工具

類別CSS
bg-clip-borderbackground-clip: border-box
bg-clip-paddingbackground-clip: padding-box
bg-clip-contentbackground-clip: content-box
bg-clip-textbackground-clip: text

結合新的漸層功能，您可以使用它來執行像這樣的炫酷漸層文字效果

<h1 class="text-6xl font-bold">  <span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">    Greetings from Tailwind v1.7.  </span></h1>

預設情況下，只有響應式變體才為 backgroundClip 外掛程式啟用

tailwind.config.js
module.exports = {  variants: {    backgroundClip: ["responsive"],  },};

新的 gap 工具別名

由於一些愚蠢的原因，我將 column-gap 和 row-gap 工具分別命名為 col-gap-{n} 和 row-gap-{n}，這並不算太糟糕，但與 Tailwind 中其他項目的命名方式不一致。

我發現自己一直弄錯它們 — row-gap 指的是行中的間隙，還是行之間的間隙？

Tailwind v1.7 引入了新的 gap-x-{n} 和 gap-y-{n} 工具，它們執行完全相同的操作，但名稱不那麼糟糕。現在 flexbox 的間隙也開始推出，它們比實際的 CSS 名稱更有意義，因為 flexbox 沒有「列」。

這些工具將在 v2.0 中取代舊的工具，但現在它們同時存在。

我們建議立即遷移到新的名稱，並使用此功能標誌停用舊的名稱

tailwind.config.js
module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },  // ...};

Tailwind 將在控制台中發出警告，提醒您在啟用此標誌之前，您的建置中包含已棄用的類別。

新的 contents 顯示工具

我們為最近的 display: contents CSS 功能新增了一個新的 contents 類別。

<div class="flex">  <div><!-- ... --></div>  <!-- This container will act as a phantom container, and its children will be treated as part of the parent flex container -->  <div class="contents">    <div><!-- ... --></div>    <div><!-- ... --></div>  </div>  <div><!-- ... --></div></div>

在Rachel Andrew 的這篇精彩文章中瞭解更多資訊。

每個字型大小的預設字元間距

您現在可以使用元組語法，在 tailwind.config.js 主題中為每個字型大小設定預設字元間距值

tailwind.config.js
module.exports = {  theme: {    fontSize: {      2xl: ['24px', {        letterSpacing: '-0.01em',      }],      // Or with a default line-height as well      3xl: ['32px', {        letterSpacing: '-0.02em',        lineHeight: '40px',      }],    }  }}

除了最近引入的更簡單的 [{fontSize}, {lineHeight}] 語法之外，還支援這種新的語法。

分割邊框樣式

我們新增了用於在 divide 工具上設定邊框樣式的工具

<div class="divide-y divide-dashed">  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div>  <div><!-- ... --></div></div>

預設情況下，這些工具包括 responsive 變體

tailwind.config.js
module.exports = {  variants: {    divideStyle: ["responsive"],  },};

從外掛程式存取整個設定物件

當不使用任何引數呼叫時，傳遞給外掛程式 API 的 config 函式現在會傳回整個設定選項

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {  // Returns entire config object  config()})

將顏色定義為閉包

您現在可以將顏色定義為回呼，這些回呼會接收一組可用於產生顏色值的參數。

當嘗試使您的自訂顏色與 backgroundOpacity、textOpacity 等工具搭配使用時，這特別有用

tailwind.config.js
module.exports = {  theme: {    colors: {      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,    },  },};

目前，唯一傳遞的是 opacityVariable 屬性，其中包含目前不透明度變數的名稱 (--background-opacity、--text-opacity 等)，具體取決於哪個外掛程式正在使用該顏色。

棄用

Tailwind v1.7 引入了新的功能標誌和棄用系統，旨在使升級盡可能輕鬆。

每當我們棄用功能或引入新的（穩定的）重大變更時，它們都將在 Tailwind v1.x 中您的 tailwind.config.js 檔案中的 future 屬性下提供。

每當有棄用或重大變更可用時，Tailwind 都會在每次建置時在控制台中警告您，直到您採用新的變更並在設定檔案中啟用該標誌

risk - There are upcoming breaking changes: removeDeprecatedGapUtilitiesrisk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.risk - https://tailwind.dev.org.tw/docs/upcoming-changes

您可以透過在 tailwind.config.js 檔案中將該標誌設定為 true 來選擇加入重大變更

tailwind.config.js
module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

如果您不希望選擇加入但想關閉警告，請明確地將該標誌設定為 false

tailwind.config.js
module.exports = {  future: {    removeDeprecatedGapUtilities: false,  },};

我們不建議這樣做，因為這會使升級到 Tailwind v2.0 更加困難。

已棄用的間隙工具

如先前所述，Tailwind v1.7.0 引入了新的 gap-x-{n} 和 gap-y-{n} 工具來取代目前的 col-gap-{n} 和 row-gap-{n} 工具。

預設情況下，這兩個類別都存在，但舊的工具將在 Tailwind v2.0 中移除。

若要遷移到新的類別名稱，只需將任何現有對舊名稱的使用替換為新名稱

<div class="col-gap-4 row-gap-2 ..."><div class="gap-x-4 gap-y-2 ..."></div>

若要立即選擇加入新的名稱，請在您的 tailwind.config.js 檔案中啟用 removeDeprecatedGapUtilities 標誌

tailwind.config.js
module.exports = {  future: {    removeDeprecatedGapUtilities: true,  },};

實驗性功能

Tailwind v1.7.0 引入了新的實驗性功能系統，讓您可以選擇加入即將在 Tailwind 中推出的新功能，但這些功能尚未完全穩定。

重要的是要注意，實驗性功能可能會引入重大變更，不遵循語義版本控制，並且可以隨時變更。

如果您喜歡過著狂野的生活，您可以像這樣啟用所有功能

tailwind.config.js
module.exports = {  experimental: "all",};

解決了這個問題後，以下是一些我們正在努力開發的有趣內容，我們很高興您終於可以玩玩了...

將 @apply 與變體和其他複雜類別搭配使用

這是很重要的一點 — 您終於可以使用 @apply 搭配響應式變體、虛擬類別變體和其他複雜類別了！

.btn {  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;}

這方面有很多細節需要了解，因此我建議閱讀 pull request，以了解其運作方式。

這會對 @apply 先前的工作方式進行重大變更，因此在切換開關之前，請務必閱讀所有詳細資訊。

若要啟用此功能，請使用 applyComplexClasses 標誌

tailwind.config.js
module.exports = {  experimental: {    applyComplexClasses: true,  },};

新的調色盤

我們新增了新的 Tailwind 2.0 調色盤的預覽，您可以立即使用 uniformColorPalette 標誌開始體驗

tailwind.config.js
module.exports = {  experimental: {    uniformColorPalette: true,  },};

新調色盤背後的想法是，每個色調的每種顏色都具有相似的感知亮度。因此，您可以將 indigo-600 與 blue-600 交換，並預期相同的顏色對比。

我們確實預期這些顏色會隨著我們的迭代而不斷變化，因此請自行承擔風險使用它們。

擴展的間距比例

我們新增了更大的間距刻度，包含新的微小值，如 0.5、1.5、2.5 和 3.5，以及新的大值，如 72、80 和 96，並且在整個間距刻度中加入了基於百分比的分數值 (1/2、5/6、7/12 等)。

您可以使用 extendedSpacingScale 標記啟用擴展的間距刻度

tailwind.config.js
module.exports = {  experimental: {    extendedSpacingScale: true,  },};

這相當穩定，如果我們更改這個，我會感到驚訝。

預設情況下，每個字體大小都有預設的行高

我們已為每個內建字體大小新增了建議的預設行高，可以使用 defaultLineHeights 標記啟用

tailwind.config.js
module.exports = {  experimental: {    defaultLineHeights: true,  },};

這是一個重大變更，會影響您的設計，因為以前所有字體大小的預設行高均為 1.5。

擴展的字體大小刻度

我們新增了三個新的字體大小 (7xl、8xl 和 9xl)，以跟上最新的超大標題文字趨勢。它們也包含預設的行高。

您可以在 extendedFontSizeScale 標記下啟用它們

tailwind.config.js
module.exports = {  experimental: {    extendedFontSizeScale: true,  },};

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

將我們所有的更新直接發送到您的收件匣。
註冊我們的電子報。