相容性

瀏覽器支援

Tailwind CSS v4.0 專為現代瀏覽器設計和測試，並且該框架的核心功能特別依賴於這些瀏覽器版本

• Chrome 120 （2023 年 12 月發布）
• Safari 16.4 （2023 年 3 月發布）
• Firefox 128 （2024 年 7 月發布）

Tailwind 還支援許多前沿平台功能，例如 field-sizing: content、@starting-style 和 text-wrap: balance，這些功能在瀏覽器中的支援有限。您是否要在專案中使用這些現代功能取決於您 — 如果您鎖定的瀏覽器不支援它們，請勿使用這些工具程式和變體。

如果您不確定是否支援某個現代平台功能，「Can I use」資料庫是一個很好的資源。

Sass、Less 和 Stylus

Tailwind CSS v4.0 是一個功能完善的 CSS 建置工具，專為特定的工作流程設計，不適用於 Sass、Less 或 Stylus 等 CSS 預處理器。

將 Tailwind CSS 本身視為您的預處理器 — 您不應將 Tailwind 與 Sass 一起使用，就像您不會將 Sass 與 Stylus 一起使用的原因一樣。

由於 Tailwind 專為現代瀏覽器設計，您實際上不需要預處理器來處理巢狀或變數等事項，而 Tailwind 本身將執行諸如捆綁您的匯入並新增供應商前綴之類的操作。

建置時匯入

Tailwind 會自動捆綁您使用 @import 包含的其他 CSS 檔案，而無需單獨的預處理工具。

@import "tailwindcss";@import "./typography.css";

在這個範例中，typography.css 檔案會由 Tailwind 為您捆綁到已編譯的 CSS 中，而無需任何其他工具，例如 Sass 或 postcss-import。

變數

所有現代瀏覽器都支援原生 CSS 變數，而無需任何預處理器

.typography {  font-size: var(--text-base);  color: var(--color-gray-700);}

Tailwind 在內部大量依賴 CSS 變數，因此如果您的專案可以使用 Tailwind，您就可以使用原生 CSS 變數。

巢狀

在幕後，Tailwind 使用 Lightning CSS 來處理像這樣的巢狀 CSS

.typography {  p {    font-size: var(--text-base);  }  img {    border-radius: var(--radius-lg);  }}

Tailwind 會為您平鋪該巢狀 CSS，以便所有現代瀏覽器都能理解它

.typography p {  font-size: var(--text-base);}.typography img {  border-radius: var(--radius-lg);}

現在原生 CSS 巢狀支援也非常好，因此即使您沒有使用 Tailwind，也真的不需要預處理器來進行巢狀。

迴圈

在 Tailwind 中，您過去可能使用迴圈的類別種類（例如 col-span-1、col-span-2 等）會在您使用它們時由 Tailwind 根據需求產生，而不必預先定義。

此外，當您使用 Tailwind CSS 建構項目時，絕大部分的樣式設定都是在 HTML 中完成，而非在 CSS 檔案中。既然您一開始就沒有撰寫大量的 CSS，那麼您就不需要像是迴圈這類為程式化產生大量自訂 CSS 規則而設計的功能。

顏色和數學函式

當使用像 Sass 或 Less 這類預處理器時，您可能曾經使用過像 darken 或 lighten 這樣的函式來調整顏色。

當使用 Tailwind 時，建議的工作流程是使用預先定義的調色盤，其中包含每種顏色的亮色和暗色陰影，例如框架中包含的精心設計的預設調色盤。

<button class="bg-indigo-500 hover:bg-indigo-600 ...">  <!-- ... --></button>

您也可以使用現代 CSS 功能，例如 color-mix()，直接在瀏覽器中即時調整顏色。這甚至讓您能夠調整使用 CSS 變數或 currentcolor 關鍵字定義的顏色，這在預處理器中是無法實現的。

同樣地，瀏覽器現在原生支援像 min()、max() 和 round() 這樣的數學函式，因此不再需要依賴預處理器來實現這些功能。

CSS 模組

Tailwind 與 CSS 模組相容，如果您將 Tailwind 引入已使用它們的專案中，它們可以共存，但如果可以避免，我們不建議同時使用 CSS 模組和 Tailwind。

範圍問題

CSS 模組旨在解決當您在 HTML 中組合工具類別而不是編寫自訂 CSS 時根本不存在的範圍問題。

使用 Tailwind 時，樣式自然會有範圍，因為每個工具類別無論在哪裡使用，總是做相同的事情 — 無論在 UI 的哪個部分新增工具類別，都不會有在其他地方產生意外副作用的風險。

效能

當使用 CSS 模組時，Vite、Parcel 和 Turbopack 等建構工具會分別處理每個 CSS 模組。這表示如果您在專案中有 50 個 CSS 模組，Tailwind 需要執行 50 次，這會導致建構時間長很多，並降低開發人員的體驗。

明確的內容共享

由於 CSS 模組是分別處理的，除非您匯入一個，否則它們沒有 @theme。

這表示除非您明確匯入全域樣式作為參考，否則像 @apply 這樣的功能將無法按照您的預期運作

@reference "../app.css";button {  @apply bg-blue-500;}

或者，您也可以直接使用 CSS 變數而不是 @apply，這樣做的好處是能讓 Tailwind 跳過處理這些檔案，並改善您的建構效能

button {  background: var(--color-blue-500);}

Vue、Svelte 和 Astro

Vue、Svelte 和 Astro 在元件檔案中支援 <style> 區塊，其行為非常像CSS 模組，這表示它們會由您的建構工具完全獨立處理，並具有所有相同的缺點。

如果您使用 Tailwind 與這些工具，我們建議避免在您的元件中使用 <style> 區塊，而直接在您的標記中使用工具類別來設定樣式，這才是 Tailwind 的使用方式。

如果您確實使用 <style> 區塊，請確保匯入您的全域樣式作為參考，如果您希望像 @apply 這樣的功能能如預期般運作

<template>  <button><slot /></button></template><style scoped>  @reference "../app.css";  button {    @apply bg-blue-500;  }</style>

或者，直接使用您全域定義的 CSS 變數，而不是像 @apply 這樣的功能，這不需要 Tailwind 處理您的元件 CSS

<template>  <button><slot /></button></template><style scoped>  button {    background-color: var(--color-blue-500);  }</style>