為 Tailwind v 做好準備

作者：Oscar Jite-Orimiono✏️

「順風」一詞的字面意思是與飛機或船的運動方向相同的風。它可以幫助物體更快地移動並更快到達目的地，從而確保速度和效率。

Tailwind CSS 是一個實用程式優先的框架，可讓您「快速建立現代網站，而無需離開HTML。」雖然並不是每個開發人員都喜歡它，但Tailwind CSS 自2019 年發布以來已經獲得了極大的歡迎。

今天，當您搜尋「頂級[插入數位] CSS 框架」時，您可能會發現 Tailwind CSS 與 Bootstrap 和 Bulma 等知名名稱並列。

本文將對下一版Tailwind v4.0進行預覽與深入分析。我們將介紹遷移現有專案的策略以及示範 Tailwind v4.0 新功能的範例。我們也將它與類似的 CSS 框架進行比較，並探討使用該框架的優點和限制。

Tailwind v4.0 入門

Tailwind v4.0 已經開發了幾個月，並於 2024 年 11 月發布了第一個公開測試版。

有關更多詳細信息，您可以訪問預發布文檔，但本指南將重點介紹開發人員可以在 Tailwind CSS v4.0 中期待的一些新的令人興奮的功能

新性能引擎

Tailwind 團隊於 2024 年 3 月發布了一款新的效能引擎 Tailwind Oxide。一些好處包括統一的工具鏈和簡化的配置，以加快建置過程。

CSS優先配置

在目前的 Tailwind 版本中，tailwind.config.js 檔案可讓您覆寫 Tailwind 的預設設計令牌。它是一個自訂中心，您可以在其中添加自訂實用程式類別和主題、停用外掛程式等等。

它最重要的功能是定義專案的內容來源，以便 Tailwind 可以掃描相關的實用程式類別名稱並產生正確的輸出。

這是使用 Tailwind v3 設定新專案時 tailwind.config.js 檔案的預設程式碼：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

刪除指令

設定設定檔後，下一步是將 Tailwind 指令加入 index.css 檔案。

這些是 Tailwind v3 中的指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 Tailwind v4 中，您不需要 tailwind.config.js 檔案和 @tailwind 指令。您只需要將「tailwindcss」匯入到您的主 CSS 檔案中，就可以開始了：

@import "tailwindcss";

這減少了設定新項目時的步驟數和檔案數量。

您仍然可以使用 JS 配置文件，例如，如果您已經有一個現有的 v3 項目，可以使用新的 @config 指令將其加載到 CSS 文件中：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

但是，並非所有功能（例如 corePlugins、important 和分隔符號）都可能在完整的 v4.0 版本中支援。某些選項（例如安全清單）可能會隨著行為的變化而傳回。

源頭檢測

如果有不想包含的文件，可以在匯入Tailwind時使用source()函數來限制自動偵測：

@tailwind base;
@tailwind components;
@tailwind utilities;

對於 Tailwind 預設情況下未偵測到的其他來源，例如 .gitignore 檔案中的任何內容，您可以使用 @source 指令來新增它們：

@import "tailwindcss";

您也可以完全停用來源偵測：

@import "tailwindcss";

@config "../../tailwind.config.js";

禁用預檢

您可以匯入專案所需的特定單一圖層並停用 Tailwind 的基本樣式：

@import "tailwindcss" source("../src");

客製化主題

新的 CSS 優先方法讓為 Tailwind 專案新增自訂樣式變得更加容易。任何自訂都會直接新增到主 CSS 檔案中，而不是 JavaScript 設定檔中。

例如，如果您想在 Tailwind CSS v3 中為自訂主題配置新顏色，則需要在 tailwind.config.js 檔案的主題部分中定義新的實用程式類別。

以下是在 JavaScript 設定檔中執行此操作的方法：

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

以下是將類別新增至 HTML 檔案的方法：

@import "tailwindcss" source(none);

在此範例中，實用程式類別是 bg-background、text-light 和 text-lilac。

在 Tailwind CSS v4.0 中，您可以使用新的 @theme 指令來設定 CSS 中的所有自訂項目：

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

然後將實用程式類別加入 HTML 中。您可以選擇相同顏色的不同深淺，例如預設的 Tailwind 顏色：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

如果您使用 VS Code 進行測試，@import 指令可能會突出顯示為錯誤，但不用擔心，它會正常工作。

請注意，上面的範例是使用 Tailwind CSS 和 React 建立的，因此我們在 HTML 中使用的是 className 而不是 class。無論您使用什麼框架，實用程式都保持不變。

主題變數

從前面的範例中，您可以看到 CSS 變數驅動 Tailwind v4.0 中的所有主題樣式：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 v4.0 中，您可以覆蓋特定的主題命名空間 - 即顏色、字體、文字等的預設實用程序，或整個 Tailwind 主題並配置您自己的主題。您可以輕鬆地為主 CSS 檔案中的每個 Tailwind 實用程式輕鬆配置自訂樣式： 若要覆寫整個預設主題，請使用 --*:initial。如果您想要覆寫預設的 Tailwind 字體並定義自己的字體，您可以使用 --font-*: 首字母，後面跟著您的自訂樣式：

@tailwind base;
@tailwind components;
@tailwind utilities;

在這種情況下，font-display 將是您的專案中唯一可用的字體系列實用程式。

您可以使用雙破折號為自訂屬性設定預設樣式。這是一個具有預設 Tailwind CSS 字體和文字樣式的頁面： 這是此頁面的 HTML 標記：

@import "tailwindcss";

我們使用前面範例中的自訂顏色，並配置新的字體和文字樣式：

@import "tailwindcss";

@config "../../tailwind.config.js";

在此範例中，我們匯入兩種字體並將它們保存在 --font-display 和 --font-logo 變數下，用於徽標和 h1 標題。我們也為兩者配置新的文字大小和預設樣式。

因此，當您在 HTML 中新增實用程式類別 text-logo 時，預設情況下該元素的字體大小為 1.5rem，字體粗細為 700。同樣，任何具有類別名稱 text-big 的元素預設的字體大小為 6rem，字體粗細為 700，字母間距為 -0.025em。

現在我們將新的實用程式類別加入 HTML 檔案中：

@import "tailwindcss" source("../src");

這是具有自訂樣式的頁面螢幕截圖： 在 Tailwind v4.0 中，對預設 Tailwind 值的依賴性將會減少，因為多個類別可以用一個自訂實用程式取代。在我們的範例中，text-big 類別名稱取代了 h1 標頭的 text-5xl 和 text-bold 實用程式類別。

同樣，這不限於特定的命名空間 - 您可以使用每個實用程式來執行此操作。

簡化的主題配置

Tailwind v4.0 中的某些實用程式不再基於您的主題配置。您將能夠直接在 HTML 文件中準確指定您想要的內容，而無需額外配置。

在 Tailwind v3 中，您需要在 tailwind.config.js 檔案中定義列數，但在 Tailwind v4.0 中，您可以使用從小至 grid-cols-5 到大至網格列73。它也適用於 z-index 實用程式（例如 z-40）和 opacity-*。

Tailwind v4.0 也內建了對 data-* 等變體的支援。您可以在沒有任意值的情況下使用它們。

這些變更的主要好處是開發人員將能夠花更少的時間配置非必要或非核心的設計令牌。

動態間距比例尺

間距實用程序，如 m-*、 w-*、mt-*、px-* 等，是使用預設 Tailwind v4 中定義的基本間距值 0.25rem 動態產生的。 0 主題。

基本間距值的每個倍數都可以在間距比例中使用。因此，如果 mt-1 是 0.25rem，則 mt-2 將是 0.25rem 乘以 2，即 0.5rem，而 mt-21 將是 5.25rem：

您可以使用具有未明確定義的值的間距實用程式。在 Tailwind v3 中，您需要使用任意值，例如 mt-[5.25rem] 或自訂主題。無需額外配置，您就可以建立更一致的設計。

如果您想要限制可用的間距值，您可以停用預設變數並定義自訂比例：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

透過此設置，每個 Tailwind 間距實用程式將僅使用專門定義的值。

更新了調色板

Tailwind v4 正在從預設的 RGB 調色板轉移到 oklch，這可以實現更鮮豔的顏色，並且比 RGB 限制更少：

容器查詢支持

Tailwind CSS v4.0 中現在內建了容器查詢支援；您不需要 @tailwindcss/container-queries 插件來建立響應式容器。

容器查詢用於根據其父容器的大小將樣式套用於元素。這意味著您的網站佈局會適應各個元件而不是整個視窗。

在 v4.0 中，您可以透過將 @container 公用程式新增至父元素來建立容器查詢。對於子元素，您可以使用 @sm 和 @lg 等響應式實用程式來根據父元素的大小應用樣式：

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind v4.0 也為最大寬度容器查詢引入了新的 @max-* 變體。當容器低於一定尺寸時，可以更輕鬆地添加樣式。您可以組合@min-*和@max-*來定義容器查詢範圍：

@import "tailwindcss";

在這段程式碼中，當父容器的寬度在md和xl（768px和1280px）之間時，子div將被隱藏。

容器查詢的使用案例包括導覽、側邊欄、卡片、圖片庫和響應式文字。它們還提供了更大的靈活性，並且跨瀏覽器得到了良好的支持，因此您可以開始在 v4.0 專案中使用它們。

從 v3 遷移到 Tailwind CSS v4.0

如果您想將 v3 專案升級到 v4，Tailwind 提供了升級工具來為您完成大部分工作。若要升級您的項目，請執行以下命令：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

升級工具將自動執行多項任務，例如更新依賴項、將 JS 設定檔移轉到 CSS 以及處理範本檔案中的變更。

Tailwind 建議使用新分支進行升級，以保持主分支完整，並仔細檢查差異。執行 git diff 命令可以幫助您查看並了解專案中的變更。您還想在瀏覽器中測試您的項目，以確認一切正常。

複雜的專案可能需要您進行手動調整，Tailwind 概述了關鍵變更以及如何適應它們，我們將在下面介紹。

依賴關係變化

PostCSS 外掛： 在 v4.0 中，PostCSS 外掛程式現在作為專用套件 @tailwindcss/postcss 提供。您可以從現有專案的 postcss.config.mjs 檔案中刪除 postcss-import 和 auto-prefixer：

@tailwind base;
@tailwind components;
@tailwind utilities;

如果您要開始一個新項目，現在可以透過執行以下命令來安裝 Tailwind 和 PostCSS 插件：

@import "tailwindcss";

Vite 插件： Tailwind CSS v4.0 還有一個新的專用 Vite 插件，他們建議您從 PostCSS 插件遷移到該插件：

@import "tailwindcss";

@config "../../tailwind.config.js";

正如我們在 PostCSS 中看到的，您可以在設定新專案時安裝 v4.0 和 Vite 外掛程式：

@import "tailwindcss" source("../src");

Tailwind CLI： 使用 CLI 工具是設定 Tailwind CSS 最簡單、最快的方法，它現在駐留在專用的 @tailwind/cli 套件中。您需要相應地更新建置命令：

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

已棄用的實用程式

幾個過時或無證的實用程式已被刪除並替換為現代替代品：

配置容器實用程式

在 v4.0 中，您可以使用 @utility 設定容器實用程式：

@import "tailwindcss" source(none);

v4.0 中不存在中心和填充等配置選項。

預設比例更改

已對每個陰影、模糊和邊框半徑實用程式進行了預設比例調整，以確保它們具有命名值：您需要替換項目中的每個實用程式以確保不會出現問題看起來不一樣了。

預設邊框顏色更改

在 v3 中，預設邊框顏色為 grey-200。使用邊框實用程式時，您不需要明確設定顏色：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 Tailwind CSS v4 中，邊框顏色更新為 currentColor，如果您在使用邊框實用程式的任何地方都沒有指定顏色，則目前項目可能會出現視覺變化。

這是 v4.0 中的預設邊框顏色： 要保持 v3 預設行為，您可以將這些 CSS 行新增至您的專案：

@tailwind base;
@tailwind components;
@tailwind utilities;

預設環寬更改

ring 實用程式在 v3 中加入了 3px 環，但在 v4 中預設為 1px。在更新項目以保持其外觀時，將 Ring 實用程式的所有用法替換為ring-3。

預設佔位符更改

在 v4 中，佔位符文字預設使用目前文字顏色，不透明度為 50%。它在 v3 中使用 grey-400 顏色，如果您想保留此行為，請將其添加到您的 CSS 中：

@import "tailwindcss";

概要變更

同樣在 v4 中，outline-none 實用程式不會像 v3 中那樣添加透明的 2px 輪廓。 v4中有一個新的outline-hidden實用程序，其行為類似於v3中的outline-none。

升級專案時，您需要將outline-none替換為outline-hidden以維持其當前狀態，除非您想要完全刪除outline。

新增自訂實用程式

自訂實用程式現在使用新的@utility API而不是@layer實用程式。此變更可確保與本機級聯層的相容性。

它們現在只是單類名稱，不再是複雜的選擇器：

@import "tailwindcss";

@config "../../tailwind.config.js";

堆疊順序敏感的變體

Tailwind v4.0 從左到右堆疊第一個和最後一個等變體，因此您需要在專案中訂購變體。

任意值的 CSS 變數

任意值變數的語法已從方括號變更為圓括號，以避免與新 CSS 標準產生歧義。您需要在專案中更新此內容：

@import "tailwindcss" source("../src");

使用 theme() 函數

Tailwind CSS v4.0 為所有主題值產生變量，因此不需要 theme() 函數。 Tailwind 建議盡可能將項目中的所有 theme() 函數替換為 CSS 變數：

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

有關 Tailwind v4.0 中的更改的更多詳細信息，您應該訪問預發行文件。

Tailwind 和替代 CSS 框架

Tailwind CSS 最明顯的替代品是 Bootstrap，它是世界上最受歡迎的 CSS 框架。它有一個廣泛的預定義元件庫。

Bootstrap 可能比 Tailwind CSS 更適合初學者。您可以使用特定且簡單的類別名稱建立即用型元件。 Tailwind 要求您了解實用程式及其底層 CSS 規則。

Bootstrap 相對於 Tailwind CSS 的另一個優點是它預設包含 JavaScript，因此您可以做更多後端工作。 Tailwind CSS 必須與 JS 框架結合。

但是，Bootstrap 不像 Tailwind CSS 那樣可定製或靈活。一個長期存在的論點是所有 Bootstrap 網站看起來都一樣。憑藉實用至上的方法，Tailwind 提供了更大的靈活性和控制力。

Tailwind CSS 缺點

近年來出現了更多實用性優先的 CSS 框架，例如 Missing.css 和 Mojo CSS。沒有人能夠從 Tailwind 手中奪走桂冠，但這並不是說它沒有一定的局限性：

陡峭的學習曲線：如前所述，實用優先的方法和大量的課程對於初學者來說可能很難學習。

程式碼可讀性：因為您主要在 HTML 檔案中工作，所以隨著每個元素累積實用程序，程式碼可能會變得難以閱讀。

不一致的設計：如果您不小心，Tailwind CSS 的靈活性可能會導致整個專案的設計不一致。

切換框架：專案可能會與 Tailwind CSS 緊密耦合，很難切換到另一個框架。

過渡到 Tailwind CSS v4.0

將現有項目升級到新版本的 Tailwind 似乎是一項艱鉅的任務，如果您有一個複雜的項目，情況確實如此，但好處是值得的。 Tailwind 透過刪除額外的工具和檔案並提供更清晰的語法，使一切變得更快、更簡單。

---

您的前端是否佔用了使用者的 CPU？

隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監控和追蹤生產中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請嘗試 LogRocket。

LogRocket 就像是網路和行動應用程式的 DVR，記錄網路應用程式、行動應用程式或網站中發生的一切。您無需猜測問題發生的原因，而是可以匯總和報告關鍵前端效能指標、重播用戶會話以及應用程式狀態、記錄網路請求並自動顯示所有錯誤。

現代化偵錯 Web 和行動應用程式的方式 - 開始免費監控。

以上是為 Tailwind v 做好準備的詳細內容。更多資訊請關注PHP中文網其他相關文章！