小編精選 - 技術文章翻譯 · 06月18日

Tailwind CSS4：為什麼那些內嵌樣式其實更具可擴充性——資深 CSS 開發者指南

所以，你聽說了 Tailwind CSS，並且想把它導入你的新專案。但那些行內樣式看起來也太亂了吧——它們看起來很像我們以前被告誡要避免的那種舊式 style="font-size: 12px; color: green; font-style: italics" 寫法。這到底是怎麼回事？我們是在倒退嗎？

純 CSS 類別的問題

在你急著轉身逃跑之前，我想我們都曾在維護大型程式碼庫時遇過這個問題：

/* 開發者 A 在 2 年前寫的 */
.card-variant-3 {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
}

兩年後，樣式表已經長到 5,000 行。而這個類別可能會在數百萬行的程式碼庫中任何地方被使用。

開發者 B 太害怕修改 .card-variant-3，因為他不知道它是不是被某個很冷門的行銷頁面使用……所以他們只好在檔案底部再附加一個新類別。

.card-variant-3-updated {
  background-color: #f3f4f6;
  padding: 1.5rem; /* <--- 只改了 padding！ */
  border-radius: 0.5rem;
}

問題在於：打包大小會隨著應用程式線性成長。你得把時間花在命名上（.main-content-inner、.card-body-flex），還得在 HTML 和 CSS 檔案之間來回切換。

Tailwind 帶給我們什麼

Tailwind 透過 CSS 變數建立像 "bg-mint-500"、"text-mint-500"、"border-mint-500" 這類的「工具類別」，讓你可以直接在 HTML 中這樣使用：

<h1 className="text-mint-500"> Introduction </h1>

這種重構帶給我們兩個優勢：

CSS 打包體積更小：因為你會一再重複使用 bg-mint-500 或 p-4 這些類別，不需要不斷寫出新的 CSS 行。無論你有 10 個頁面還是 10,000 個頁面，正式環境的 CSS 大小幾乎都維持不變（通常只有傳統樣式表的一小部分）。
重構風險大幅降低：所有決定這個元素外觀的東西，都只存在於這個元件區塊內。如果你刪掉這個元件，樣式也會跟著立刻刪除。完全不會有影響到你應用程式另一邊側欄的風險。