文件元件部落格展示

Tailwind CSS v4.0

Adam Wathan
Tailwind CSS v4.0

天啊，它真的完成了 — 我們剛剛標記了 Tailwind CSS v4.0。

Tailwind CSS v4.0 是一個全新的框架版本，針對效能和靈活性進行了最佳化，具有重新設計的配置和自訂體驗，並充分利用了 Web 平台的最新進展。

  • 全新高效能引擎 — 其中完整建置速度提高 5 倍，增量建置速度提高 100 倍以上 — 並以微秒為單位衡量。
  • 為現代網路設計 — 基於尖端的 CSS 功能建構，如串聯層、使用 @property 註冊的自訂屬性，以及 color-mix()。
  • 簡化的安裝 — 更少的依賴項，零配置，以及 CSS 檔案中只需一行程式碼。
  • 第一方 Vite 外掛程式 — 緊密整合，實現最大效能和最小配置。
  • 自動內容偵測 — 所有範本檔案都會自動偵測到，無需任何配置。
  • 內建匯入支援 — 無需其他工具來捆綁多個 CSS 檔案。
  • CSS 優先配置 — 重新設計的開發人員體驗，您可以在 CSS 中直接自訂和擴展框架，而不是在 JavaScript 配置檔案中。
  • CSS 主題變數 — 所有設計符號都以原生 CSS 變數的形式公開，因此您可以在任何地方存取它們。
  • 動態實用程式值和變體 — 不再猜測間距比例中存在哪些值，或為了基本資料屬性等事物而擴展配置。
  • 現代化的 P3 色彩調色盤 — 重新設計、更生動的色彩調色盤，充分利用了現代顯示技術。
  • 容器查詢 — 基於容器大小來設定元素樣式的一流 API，無需外掛程式。
  • 新的 3D 轉換實用程式 — 直接在 HTML 中轉換 3D 空間中的元素。
  • 擴展的漸層 API — 徑向和錐形漸層、內插模式等。
  • @starting-style 支援 — 您可以用來建立進入和退出轉換的新變體，無需 JavaScript。
  • not-* 變體 — 僅當元素與另一個變體、自訂選取器或媒體或功能查詢不符時才設定其樣式。
  • 更多新的實用程式和變體 — 包括對 color-scheme、field-sizing、複雜陰影、inert 等的支援。

立即開始使用 Tailwind CSS v4.0，方法是在新專案中安裝它，或在 Tailwind Play 上直接在瀏覽器中試用。

對於現有專案，我們發布了全面的升級指南，並建構了自動升級工具，讓您可以盡快且無痛地升級到最新版本。

全新高效能引擎

Tailwind CSS v4.0 是框架的從頭開始重寫版本，吸收了我們多年來對架構的了解，並將其最佳化，使其速度盡可能快。

當我們在自己的專案上進行基準測試時，我們發現完整重建速度提高了 3.5 倍以上，而增量重建速度提高了 8 倍以上。

以下是我們將 Tailwind CSS v4.0 與 Catalyst 進行基準測試時看到的平均建置時間

v3.4v4.0改進
完整建置378 毫秒100 毫秒3.78 倍
具有新 CSS 的增量重建44 毫秒5 毫秒8.8 倍
沒有新 CSS 的增量重建35 毫秒192 微秒182 倍

最令人印象深刻的改進是針對實際上不需要編譯任何新 CSS 的增量建置 — 這些建置速度提高了 100 倍以上，並在微秒內完成。而且，您在專案上工作時間越長，您遇到的這類建置就越多，因為您只是在使用您之前已經使用過的類別，例如 flex、col-span-2 或 font-bold。

為現代網路設計

自我們發布 Tailwind CSS v3.0 以來，平台已經發生了很大的變化，而 v4.0 充分利用了許多這些改進。

CSS
@layer theme, base, components, utilities;@layer utilities {  .mx-6 {    margin-inline: calc(var(--spacing) * 6);  }  .bg-blue-500\/50 {    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);  }}@property --tw-gradient-from {  syntax: "<color>";  inherits: false;  initial-value: #0000;}

我們正在利用現代 CSS 功能，如

  • 原生串聯層 — 使我們能夠比以往更好地控制不同的樣式規則如何相互作用。
  • 註冊的自訂屬性 — 使我們能夠執行諸如動畫漸層之類的操作，並顯著提高大型頁面的效能。
  • color-mix() — 這讓我們可以調整任何顏色值的不透明度，包括 CSS 變數和 currentColor。
  • 邏輯屬性 — 簡化 RTL 支援並減少產生的 CSS 的大小。

許多這些功能甚至簡化了 Tailwind 的內部結構，減少了錯誤的表面積，並使框架更容易維護。

簡化的安裝

我們在 v4.0 中大大簡化了設定過程，減少了步驟數量並移除了許多樣板程式碼。

1. 安裝 Tailwind CSS
npm i tailwindcss @tailwindcss/postcss;
2. 新增 PostCSS 外掛程式
export default {  plugins: ["@tailwindcss/postcss"],};
3. 在您的 CSS 中匯入 Tailwind
@import "tailwindcss";

透過我們對 v4.0 的此過程所做的改進，Tailwind 比以往任何時候都感覺更輕量

  • 只需一行 CSS — 不再有 @tailwind 指令，只需新增 @import "tailwindcss" 並開始建置。
  • 零配置 — 你可以無需任何設定即可開始使用此框架，甚至無需設定樣板檔案的路徑。
  • 無需外部外掛 — 我們開箱即用地為你綁定了 @import 規則，並在底層使用 Lightning CSS 進行廠商前綴處理和現代語法轉換。

當然，你每個專案只需要執行一次，但當你每個週末都開始和放棄不同的 side-project 時，累積起來就很可觀了。

第一方 Vite 外掛

如果你是 Vite 使用者，現在可以使用 @tailwindcss/vite 來整合 Tailwind，而不是 PostCSS。

vite.config.ts
import { defineConfig } from "vite";import tailwindcss from "@tailwindcss/vite";export default defineConfig({  plugins: [    tailwindcss(),  ],});

當 Tailwind CSS v4.0 作為 PostCSS 外掛使用時速度非常快，但使用 Vite 外掛效能會更好。

自動內容偵測

你知道在 Tailwind CSS v3 中你總是必須設定那個惱人的 content 陣列嗎？在 v4.0 中，我們提出了一系列啟發式方法來自動偵測所有這些東西，因此你完全不需要設定它。

例如，我們會自動忽略你的 .gitignore 檔案中的任何內容，以避免掃描不在版本控制下的依賴項或產生的檔案。

.gitignore
/node_modules/coverage/.next//build

我們也會自動忽略所有二進位擴展名，例如圖像、影片、.zip 檔案等等。

如果你需要明確加入預設排除的來源，你始終可以使用 @source 指令在你的 CSS 檔案中加入。

CSS
@import "tailwindcss";@source "../node_modules/@my-company/ui-lib";

@source 指令在底層使用相同的啟發式方法，因此它也會排除二進位檔案類型，而無需你明確指定所有要掃描的擴展名。

請參閱我們關於在原始碼檔案中偵測類別的新文件，以了解更多資訊。

內建匯入支援

在 v4.0 之前，如果你想使用 @import 來內嵌其他 CSS 檔案，你需要設定另一個外掛，例如 postcss-import 來為你處理它。

現在我們開箱即用地處理此問題，因此你不需要任何其他工具。

postcss.config.js
export default {  plugins: [    "postcss-import",    "@tailwindcss/postcss",  ],};

我們的匯入系統是專為 Tailwind CSS 打造的，因此我們還可以通過將其與我們的引擎緊密整合，使其速度更快。

CSS 優先配置

Tailwind CSS v4.0 中最大的變化之一是從在 JavaScript 中配置你的專案轉變為在 CSS 中配置。

你可以在導入 Tailwind 的 CSS 檔案中直接設定所有自訂設定，而無需 tailwind.config.js 檔案，從而減少專案中需要擔心的檔案數量。

CSS
@import "tailwindcss";@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

新的 CSS 優先配置可讓你執行你在 tailwind.config.js 檔案中可以執行的幾乎所有操作，包括配置設計標記、定義自訂工具程式和變體等等。

要了解其運作方式的更多資訊，請閱讀新的主題變數文件。

CSS 主題變數

Tailwind CSS v4.0 預設會將你的所有設計標記設為 CSS 變數，因此你可以僅使用 CSS 在執行時參考所需的任何值。

使用前面的 @theme 範例，所有這些值都會作為常規自訂屬性新增到你的 CSS 中。

產生的 CSS
:root {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

這可以讓你輕鬆地將這些值重複使用為內嵌樣式，或將它們傳遞給像是 Motion 的程式庫來進行動畫處理。

動態工具程式值和變體

我們簡化了 v4.0 中許多工具程式和變體的工作方式，有效地允許它們接受某些類型的任意值，而無需任何配置或降級為任意值語法。

例如，在 Tailwind CSS v4.0 中，你可以開箱即用地建立任何大小的網格。

HTML
<div class="grid grid-cols-15">  <!-- ... --></div>

你也可以無需定義即可定位自訂的布林資料屬性。

HTML
<div data-current class="opacity-75 data-current:opacity-100">  <!-- ... --></div>

甚至像 px-*、mt-*、w-*、h-* 等間距工具程式現在都是從單一間距比例變數動態衍生而來，並且開箱即用地接受任何值。

產生的 CSS
@layer theme {  :root {    --spacing: 0.25rem;  }}@layer utilities {  .mt-8 {    margin-top: calc(var(--spacing) * 8);  }  .w-17 {    width: calc(var(--spacing) * 17);  }  .pr-29 {    padding-right: calc(var(--spacing) * 29);  }}

如果升級工具發現你使用了不再需要的任意值，我們在 v4.0 中發布的升級工具甚至會自動為你簡化大多數這些工具程式。

現代化的 P3 色彩盤

我們已將整個預設色彩盤從 rgb 升級為 oklch，利用更廣泛的色域，使顏色在先前受限於 sRGB 色彩空間的地方更加鮮豔。

我們試圖保持所有顏色之間的平衡與 v3 中相同，因此即使我們全面刷新了這些內容，升級現有專案時也不應該感覺到是一種破壞性變更。

容器查詢

我們將容器查詢支援引入 v4.0 的核心，因此你不再需要 @tailwindcss/container-queries 外掛。

HTML
<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">    <!-- ... -->  </div></div>

我們還使用新的 @max-* 變體新增了對最大寬度容器查詢的支援。

HTML
<div class="@container">  <div class="grid grid-cols-3 @max-md:grid-cols-1">    <!-- ... -->  </div></div>

就像我們的常規中斷點變體一樣，你也可以堆疊 @min-* 和 @max-* 變體來定義容器查詢範圍。

HTML
<div class="@container">  <div class="flex @min-md:@max-xl:hidden">    <!-- ... -->  </div></div>

請參閱我們全新的容器查詢文件，以了解更多資訊。

新的 3D 轉換工具程式

我們最終新增了用於執行 3D 轉換的 API，例如 rotate-x-*、rotate-y-*、scale-z-*、translate-z-* 等等。

Michael Foster

提高你的轉換率

<div class="perspective-distant">  <article class="rotate-x-51 rotate-z-43 transform-3d ...">    <!-- ... -->  </article></div>

請查看更新的 transform-style、rotate、perspective 和 perspective-origin 文件以開始使用。

擴展的漸層 API

我們在 v4.0 中新增了許多新的漸層功能，因此你可以實現更精緻的效果，而無需編寫任何自訂 CSS。

線性漸層角度

線性漸層現在支援將角度作為值，因此你可以使用 bg-linear-45 等工具程式來建立 45 度角的漸層。

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

你可能會注意到我們也將 bg-gradient-* 重新命名為 bg-linear-* — 你很快就會明白原因！

漸層插值修飾符

我們新增了使用修飾符來控制漸層的色彩插值模式的功能，因此像 bg-linear-to-r/srgb 這樣的類別使用 sRGB 進行插值，而 bg-linear-to-r/oklch 則使用 OKLCH 進行插值。

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

當 from-* 和 to-* 顏色在色輪上相距較遠時，使用像 OKLCH 或 HSL 這樣的極座標色彩空間可以產生更鮮明的漸層效果。在 v4.0 中，我們預設使用 OKLAB，但您始終可以透過添加這些修飾符之一來使用不同的色彩空間進行插值。

錐形和放射狀漸層

我們新增了 bg-conic-* 和 bg-radial-* 工具類，用於建立錐形和放射狀漸層。

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div><div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

這些新的工具類與現有的 from-*、via-* 和 to-* 工具類協同工作，讓您可以使用與建立線性漸層相同的方式來建立錐形和放射狀漸層，並包含用於設定顏色插值方法和任意值支援的修飾符，以控制諸如漸層位置之類的細節。

@starting-style 支援

新的 starting 變體增加了對新的 CSS @starting-style 功能的支援，使得在元素首次顯示時可以轉換元素屬性。

<div>  <button popovertarget="my-popover">Check for updates</button>  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">    <!-- ... -->  </div></div>

有了 @starting-style，您終於可以在元素出現在頁面上時將其動畫化，而完全不需要任何 JavaScript。 瀏覽器支援 對於大多數團隊來說可能還沒完全到位，但我們正在接近！

not-* 變體

我們新增了一個新的 not-* 變體，最終增加了對 CSS :not() 偽類別的支援。

HTML
<div class="not-hover:opacity-75">  <!-- ... --></div>
CSS
.not-hover\:opacity-75:not(*:hover) {  opacity: 75%;}@media not (hover: hover) {  .not-hover\:opacity-75 {    opacity: 75%;  }}

它可以同時執行兩項任務，並且還可以讓您否定媒體查詢和 @supports 查詢。

HTML
<div class="not-supports-hanging-punctation:px-4">  <!-- ... --></div>
CSS
.not-supports-hanging-punctation\:px-4 {  @supports not (hanging-punctation: var(--tw)) {    padding-inline: calc(var(--spacing) * 4);  }}

請查看新的 not-* 文件以了解更多資訊。

更多新的工具類和變體

我們在 v4.0 中也新增了許多其他新的工具類和變體，包括

  • 新的 inset-shadow-* 和 inset-ring-* 工具類 — 使得可以在單個元素上堆疊多達四層陰影。
  • 新的 field-sizing 工具類 — 用於自動調整文字區域的大小，而無需編寫任何 JavaScript。
  • 新的 color-scheme 工具類 — 讓您終於可以擺脫黑暗模式中那些難看的淺色捲軸。
  • 新的 font-stretch 工具類 — 用於仔細調整支援不同寬度的可變字體。
  • 新的 inert 變體 — 用於設定標記有 inert 屬性的非互動式元素的樣式。
  • 新的 nth-* 變體 — 用於執行一些非常聰明的事情，您最終會後悔。
  • 新的 in-* 變體 — 與 group-* 非常相似，但不需要 group 類別。
  • 支援 :popover-open — 使用現有的 open 變體來同時針對開啟的彈出視窗。
  • 新的 descendant 變體 — 用於設定所有後代元素的樣式，不論好壞。

請查看所有這些功能的相關文件以了解更多資訊。

就這樣 — 這就是 Tailwind CSS v4.0。 為此，我們努力了數年，但我們都對這個版本感到非常自豪，並且迫不及待地想看看您用它構建什麼。

請查看、試用，甚至可以破壞它，並一定要告訴我們您的想法。

請明天再回報錯誤 — 至少讓我們享受一頓慶祝的團隊晚餐，也許可以在這家飯店的熱水浴缸中放鬆一下，相信我們真的發布了完美無瑕的軟體。

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