A
約 1 分鐘閱讀

Tailwind CSS v4 來了！速度更快、體積更小、寫法更自由

#CSS #Tailwind

Tailwind CSS v4 是近年來最大的版本更新。它不再只是「好用的 Utility-First CSS」，而是一個經過重新設計的 CSS 引擎。

最大的改變：速度與體積

v4 拋棄了原本的 JavaScript 配置檔 (tailwind.config.js)，轉而直接使用 CSS 變數。這意味著：

  1. 編譯速度快 10 倍：不需要等待繁重的 JS 解析。
  2. 更小的打包體積：只打包你真正用到的樣式。

全新的配置方式

以前我們要定義顏色、斷點，都要去 tailwind.config.js 改。現在，直接在 CSS 檔裡用 @theme 區塊定義：

@import "tailwindcss";

@theme {
  --color-brand-primary: #ff5722;
  --font-family-sans: "Inter", sans-serif;
  --spacing-128: 32rem;
}

然後你就可以直接用 text-brand-primary 或 p-128。

動態數值 (Dynamic Values)

以前如果我們要用一個特定的數值，例如 w-[350px]，Tailwind 會生成一個 class。現在 v4 的引擎更聰明，它能即時處理這些任意值，而且支援 CSS 運算。

<div class="w-[calc(100%-20px)] bg-brand-primary/50">...</div>

注意那個 /50，現在透明度也可以直接接在自定義顏色後面了！

容器查詢 (Container Queries) 正式轉正

以前要用 @tailwindcss/container-queries 外掛，現在直接內建：

<div class="@container">
  <div class="@lg:grid-cols-2 grid">
    <!-- 當父容器大於 lg 時變兩欄 -->
  </div>
</div>

3D 變換 (3D Transforms)

v4 增加了對 3D 屬性的支援：

<div class="transform-3d rotate-x-12 rotate-y-24">...</div>

再也不用自己寫 transform: rotateX(...) 了。

升級指南

如果你還在用 v3，升級其實很無痛。官方提供了一個遷移工具：

npx @tailwindcss/upgrade@next

它會自動幫你把 tailwind.config.js 的設定轉換成新的 CSS 變數格式。

結語

說真的，Tailwind v4 這次大改版真的超有感！寫起來有種直接寫原生 CSS 的痛快感，但又保留了套 class 的爽度。如果你之前一直猶豫要不要學 Tailwind，別等了，現在絕對是上車的最佳時機！

站內相關文章：