文件元件部落格展示

Tailwind CSS v2.2

Adam Wathan

好吧，我不能說我們真的有計劃這麼做，但在過去幾週，我們一直在 Tailwind 中加入許多新的和令人興奮的功能，現在感覺是發布版本的適當時機，所以它來了 — Tailwind CSS v2.2！

這絕對是有史以來功能最豐富的 Tailwind 版本之一。自 v2.1 引入即時模式以來，它開啟了許多我們以前無法輕易添加的酷炫功能的大門，而此版本就包含許多這類很棒的範例。

以下是重點功能

如需完整詳細資訊，請查看 GitHub 上的版本資訊。

請務必注意，雖然這是一個小版本，而且經典引擎中沒有重大變更，但即時模式仍然是預覽版，而且 v2.2 引入了一些可能會影響您的非常小的變更，因此請務必在升級時仔細閱讀版本資訊中的變更和棄用。

當您準備好升級時，只需從 npm 安裝最新版本，即可開始使用

npm install -D tailwindcss@latest

全新高效能 Tailwind CLI

我們已從頭開始重寫 Tailwind CLI 工具，以效能優先，同時也加入了許多新功能。

npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"

以下是一些重點功能

  • 無需安裝或設定 — 只需 npx tailwindcss -o output.css 即可從任何位置編譯 Tailwind。您甚至可以使用 --jit 旗標啟用 JIT 模式，並使用 --purge 選項傳入您的內容檔案，而無需建立組態檔。
  • 監看模式 — 讓您在進行任何變更時自動重建 CSS。
  • JIT 效能最佳化 — 由於我們的 CLI 是 Tailwind 專屬的，因此我們能夠進行大量的最佳化，使其成為在 JIT 模式下編譯 CSS 的絕對最快速建置工具。
  • 縮小支援 — 現在您可以透過加入 --minify 旗標，使用 cssnano 來縮小 CSS。
  • PostCSS 外掛程式支援 — 新的 CLI 將讀取並遵循您使用 postcss.config.js 檔案設定的任何額外外掛程式。

它與先前的 CLI 完全向下相容，因此如果您已設定任何指令碼，您應該可以升級至 v2.2 而無需對指令碼進行任何變更。

請查看我們更新的 Tailwind CLI 文件以深入了解。

請注意，如果您使用的是 tailwindcss-cli 包裝函式套件，則可以安全地切換至 tailwindcss，因為我們已解決強制我們首先建立包裝函式套件的同層相依性問題。

Before 和 after 虛擬元素變體

此功能僅在即時模式中提供.

人們多年來一直要求此功能，它終於來了！我們已為樣式化虛擬元素（例如 before 和 after）加入了第一方支援

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>

每當您使用 before 或 after 變體時，我們會自動設定 content: ""，以確保轉譯元素，但您可以使用新的 content 工具覆寫它，該工具具有完整的任意值支援

<div class="before:block before:content-['hello'] ..."></div>

您甚至可以使用 CSS attr() 函式從屬性中抓取內容

<div before="hello world" class="before:block before:content-[attr(before)] ..."></div>

當您的內容中有空格時，這會非常有幫助，因為空格不能在 CSS 類別名稱中使用。

First-letter/line 變體

此功能僅在即時模式中提供.

我們已加入 first-letter 和 first-line 虛擬元素的變體，因此您可以執行諸如首字放大之類的操作

<p class="first-letter:float-left first-letter:text-4xl first-letter:font-bold">  The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn Michaels in the long  anticipated Iron Man match — a 60 minute war of endurance where the man who scored the most number of falls would walk  away as the WWF World Heavyweight Champion.</p>

選取文字變體

此功能僅在即時模式中提供.

我們已加入新的 selection 變體，讓您能夠非常輕鬆地將醒目提示的樣式設定為符合您的設計

<p class="selection:bg-pink-200">  After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the Sharpshooter, his  signature submission hold. As Michaels screamed in pain, the crowd were certain that Hart was about to walk away from  WrestleMania XII as the still-World Heavyweight Champion.</p>

我們甚至以一種可以應用於父元素並向下級聯的方式建構此功能，因此您可以透過將工具應用於主體來設定整個網站的醒目提示顏色

<body class="selection:bg-pink-200">  <!-- ... -->  <p>    But Michaels didn't give up — he held on until the bell rang and the designated 60 minutes was up. Hart walked away    content, thinking that without a clear winner, the title was his to hold. He was not prepared for what would happen    next, when Gorilla Monsoon declared the match would continue under sudden death rules.  </p></body>

清單標記變體

此功能僅在即時模式中提供.

您可以使用新的 marker 變體，來設定清單開頭的項目符號或數字樣式

<h1>WrestleMania XII Results</h1><ol class="marker:font-medium marker:text-gray-500">  <li>The British Bulldog, Owen Hart, and Vader defeated Ahmed Johnson, Jake Roberts, and Yokozuna</li>  <li>Roddy Piper defeated Goldust</li>  <li>Stone Cold Steve Austin defeated Savio Vega</li>  <li>The Ultimate Warrior defeated Hunter Hearst Helmsley</li>  <li>The Undertaker defeated Diesel</li>  <li>Shawn Michaels defeated Bret Hart</li></ol>

就像 selection 變體一樣，我們已透過從父項級聯的方式來實作此功能，因此您不必為每個清單項目重複此功能。

同層選擇器變體

此功能僅在即時模式中提供.

Tailwind CSS v2.2 加入了新的 peer-* 變體，其行為與 group-* 變體非常相似，但用於鎖定同層元素而不是父元素。

這對於在選取先前的核取方塊時設定元素樣式、執行諸如浮動標籤之類的操作以及更多其他操作很有用

<label>  <input type="checkbox" class="peer sr-only" />  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">    <!-- ... -->  </span></label>

就像 group 可以與任何其他變體結合一樣，peer 也可以，因此您可以使用諸如 peer-hover、peer-focus、peer-disabled 等等更多變體。

產生的 CSS 使用通用同層組合符，如下所示

.peer:checked ~ .peer-checked\:bg-blue-500 {  background-color: #3b82f6;}

因此，就像在原生 CSS 中一樣，它只適用於鎖定先前的同層元素，而不適用於稍後出現在 DOM 中的同層元素。

完整的虛擬類別支援

此功能僅在即時模式中提供.

我們在此版本中為我們能想到的幾乎每一個遺失的虛擬類別加入了變體

  • only (only-child)
  • first-of-type
  • last-of-type
  • only-of-type
  • target
  • default
  • indeterminate
  • placeholder-shown
  • autofill
  • required
  • valid
  • invalid
  • in-range
  • out-of-range

清單中我個人最喜歡的是 placeholder-shown — 當與新的同層選擇器變體結合使用時，它可以執行諸如浮動標籤之類的酷炫操作

<div class="relative">  <input id="name" class="peer ..." />  <label for="name" class="peer-placeholder-shown:top-4 peer-focus:top-0 ..."> Name </label></div>

簡寫色彩不透明度語法

此功能僅在即時模式中提供.

Tailwind CSS v2.2 沒有使用諸如 bg-opacity-50、text-opacity-25 或 placeholder-opacity-40 之類的工具，而是提供新的色彩不透明度簡寫，您可以使用它來直接在色彩工具本身中調整色彩的 Alpha 通道

<div class="bg-red-500 bg-opacity-25"><div class="bg-red-500/25"></div>

這表示您現在可以在 Tailwind 中的任何位置變更色彩的不透明度，甚至在我們之前沒有特定不透明度工具的地方，例如在漸層中

<div class="bg-gradient-to-r from-red-500/50"></div>

不透明度值取自您的 opacity 比例，但您也可以使用方括號表示法使用任意不透明度值

<div class="bg-red-500/[0.31]"></div>

老實說，比起實際使用這個功能，我更高興的是再也不用為了你們這些人創建像 placeholderOpacity.js 這樣的核心外掛了。而且我真的很興奮能有這個功能，這代表它真的很棒。

擴充的任意值支援

此功能僅在即時模式中提供.

我們已經仔細檢查過 Tailwind 中的每個核心外掛，盡可能地加入最彈性的任意值支援，我認為到目前為止我們幾乎涵蓋了所有內容。

您應該可以在幾乎任何您想要的地方使用任何您想要的任意值

<div class="col-start-[73] object-[50%] placeholder-[#aabbcc] ..."></div>

如果您發現我們遺漏了任何地方，請開啟一個 issue，我們會處理它。

除了讓任意值支援更全面之外，我們還加入了一種新的型別提示語法來處理模糊的情況。例如，如果您使用 CSS 變數作為任意值，則產生的 CSS 應該是什麼並不總是清楚的

<!-- Is this a font size utility, or a text color utility? --><div class="text-[var(--mystery-var)]"></div>

現在，您可以在任意值前加上型別名稱來向引擎提供提示

<div class="text-[color:var(--mystery-var)]"></div>

目前，支援的類型有

  • 長度 (length)
  • 顏色 (color)
  • 角度 (angle)
  • 列表 (list)

隨著人們發現新的邊緣案例，我們可能會隨著時間的推移進一步擴充此功能，但這應該能讓您順利地使用。

改良的巢狀支援

由於 Tailwind 引入了許多非標準的 CSS at-rules，例如 @tailwind 和 @apply，當將其與 PostCSS 巢狀外掛（如 postcss-nested 或 postcss-nesting）組合使用時，您通常會遇到奇怪的輸出。

為了減輕這方面的痛苦，我們在 tailwindcss 套件中加入了一個新的 PostCSS 外掛，它充當現有巢狀外掛和 Tailwind 本身之間的輕量級相容層。

因此，如果您的專案需要巢狀支援，請使用我們的外掛，並將其放在 PostCSS 外掛列表中的 Tailwind 之前

// postcss.config.jsmodule.exports = {  plugins: [    // ...    require("tailwindcss/nesting"),    require("tailwindcss"),    // ...  ],};

預設情況下，它在底層使用 postcss-nested (因為這就是我們在 Tailwind 外掛中支援巢狀的方式)，但如果您想改用 postcss-nesting，只需將我們的外掛作為一個函數調用，並傳遞 postcss-nesting 外掛即可

// postcss.config.jsmodule.exports = {  plugins: [    // ...    require("tailwindcss/nesting")(require("postcss-nesting")),    require("tailwindcss"),    // ...  ],};

在底層，這使用了我們新引入的 screen() 函式，您可以使用它從任何已設定的斷點中取得擴展的媒體查詢表示式

/* Input */@media screen(sm) {  /* ... */}/* Output */@media (min-width: 640px) {  /* ... */}

您可能不需要自己使用它，但如果您將 Tailwind 與另一個可以理解 @media 但無法正確處理 @screen 的工具整合時，它可能會很有幫助。

@screen sm {@media screen(sm) {  /* ... */}

游標顏色工具

此功能僅在即時模式中提供.

現在您可以使用新的 caret-{color} 工具設定表單欄位中游標的顏色

<input class="caret-red-500" />

這些可以使用 tailwind.config.js 檔案的 theme 區段中的 caretColor 鍵進行自訂。

背景原點工具

我們為 background-origin 屬性加入了新的工具，讓您可以控制元素背景相對於元素的邊框、內距框或內容的位置

<div class="border-4 border-dashed bg-origin-border p-4 ..." style="background-image: url(...)">  Background is rendered under the border</div><div class="border-4 border-dashed bg-origin-padding p-4 ..." style="background-image: url(...)">  Background is rendered within the border but on top of any padding</div><div class="border-4 border-dashed bg-origin-content p-4 ..." style="background-image: url(...)">  Background is rendered within any padding and under the content</div>

請在背景原點文件中了解更多資訊。

簡化的轉換與濾鏡組合

此功能僅在即時模式中提供.

不再需要 transform、filter 和 backdrop-filter 類別來「啟用」它們各自的可組合工具集。

<div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm"><div class="scale-50 grayscale backdrop-blur-sm"></div>

現在，只要您使用任何相關的子工具，這些功能就會自動啟用。

不過，重要的是要理解，由於不再需要這些工具，您不能再期望轉換和篩選器預設為「休眠」狀態。如果您依賴透過切換這些類別來有條件地「啟用」轉換或篩選器，您將需要確保改為切換子工具本身

<div class="scale-105 -translate-y-1 hover:transform"><div class="hover:scale-105 hover:-translate-y-1"></div>

我不認為這對大多數人來說會是一個真正的問題，但它在技術上是一個重大變更，這就是為什麼我們將此改進僅限於 JIT 引擎的原因。

每側邊框顏色工具

此功能僅在即時模式中提供.

在過去四年中，至少每月都會有人要求，我很高興地分享，由於我們不必再擔心開發樣式表的大小，我們終於加入了每邊邊框顏色的支援。

<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">  <!-- ... --></div>

去建立醜陋的網站吧！(開玩笑的，開玩笑的，我知道它們很有用，請冷靜下來。)

內建的安全清單、轉換和萃取支援

我們為一堆重要的 PurgeCSS 功能加入了第一級支援，並讓它們也能在 JIT 引擎中運作，而 JIT 引擎實際上甚至不使用 PurgeCSS。

首先是 safelist，如果您需要保護特定的類別不被從您的生產 CSS 中移除，這非常有用，可能是因為它們用於來自資料庫或類似來源的內容中

module.exports = {  purge: {    content: ["./src/**/*.html"],    safelist: [      "bg-blue-500",      "text-center",      "hover:opacity-100",      // ...      "lg:text-right",    ],  },  // ...};

請注意，雖然經典引擎會在這裡接受正規表示式，但 JIT 引擎不會。這是因為當我們按需產生類別時，類別在使用之前不會存在，所以我們沒有任何東西可以與表示式匹配。因此，如果您使用的是即時模式，請確保您提供完整的類別名稱以獲得預期的結果。

接下來是 transform，它讓您可以在掃描潛在的類別名稱之前轉換不同檔案副檔名的內容

let remark = require("remark");module.exports = {  purge: {    content: ["./src/**/*.{html,md}"],    transform: {      md: (content) => {        return remark().process(content);      },    },  },  // ...};

如果您有以編譯成 HTML 的語言 (如 Markdown) 編寫的模板，這非常有用。

最後，我們有 extract，它讓您可以自訂 Tailwind 用來偵測特定檔案類型中類別名稱的邏輯

module.exports = {  purge: {    content: ["./src/**/*.{html,md}"],    extract: {      pug: (content) => {        return /[^<>"'`\s]*/.match(content);      },    },  },  // ...};

這是一個進階功能，大多數使用者不需要它。Tailwind 中的預設提取邏輯幾乎適用於所有專案。

有關這些功能的更多資訊，請查看我們的最佳化生產環境的文件。

升級

要升級到 Tailwind CSS v2.2，請從 npm 安裝最新版本

npm install -D tailwindcss@latest

如果您正在使用即時模式預覽，您還需要閱讀發行說明中的變更和棄用。

準備好升級了嗎？從 npm 取得 →

直接在您的收件匣中取得我們所有的更新。
訂閱我們的電子報。