TailwindCSS4.0釋出，經過徹底重寫，實現更快的Rust驅動構建

Tailwind CSS 4.0 已經發布，承諾將構建時間提高 5 倍，下一步稱增量構建提高 100 倍，同時提供新的 CSS 功能並可透過單個匯入語句進行安裝，但其技術文件指出核心功能需要最新的 Web 瀏覽器，這可能會限制最初的採用。

這個流行的 CSS 框架和工具集的主要功能是代號為“Oxide”的全新構建引擎。

該引擎比以前小 35%，雖然大部分都是用 TypeScript 編寫的，但它包括用 Rust 重寫的軟體包，用於計算最耗費資源的操作，以及利用Lightning CSS，這是一個同樣使用 Rust 編寫的 CSS 解析器。

Tailwind CSS 4.0 現已針對 Vite JavaScript 和 TypeScript 構建工具進行了最佳化，並且擁有第一方 Vite 外掛，根據Tailwind 建立者 Adam Wathan 的釋出帖，該外掛可提供“最高效能和最低配置”。

該框架中的新 CSS 功能包括級聯層，它提供了結構化特異性，解決了 CSS 中最棘手的功能之一。另一個新功能是使用 CSS 註冊的自定義屬性，允許具有預設值的屬性可以設定為繼承或不繼承其值。據 Wathan 稱，使用這些現代功能簡化了 Tailwind 的內部工作，使維護更加容易。

如何使用

在專案中包含 Tailwind 非常簡單，只需新增以下內容：

@import"tailwindcss";

新增到 CSS 檔案中即可，如果使用 npm（節點包管理器）安裝了 Tailwind – 儘管 npm 不是必需的，並且你也可以使用獨立工具。

例如，將框架與 Next.js 或 Angular 一起使用通常會使用 PostCSS 外掛，或 SvelteKit 或 Astro 的 Vite 外掛以及用於在任何專案中使用 Tailwind 的 CLI（命令列介面）工具。

配置已從 JavaScript 檔案轉移到 CSS 本身，使用主題變數。舊的 JavaScript 配置檔案仍然受支援，但必須明確載入。

Tailwind CSS 4.0 中的調色盤已從 rgb（紅綠藍）更改為 oklch（Oklab 顏色空間），增加了色度和色調座標以獲得更豐富的色彩。新的 3D 變換 API 允許縮放、旋轉等。

開發者始終要警惕瀏覽器相容性問題，而 Tailwind CSS 4.0 需要較新的瀏覽器，具體來說是 Chrome 120 或更高版本、Safari 16.4 或更高版本，或者 Firefox 128 或更高版本。

文件稱這些是“核心功能”所必需的，而 Tailwind 3.0 的文件則更為寬容，建議開發人員如果針對舊版瀏覽器，則應避免使用不受支援的功能，早期的 Internet Explorer 放心吧，它不再受任何支援。

雖然提供了升級工具，但仍存在一些升級問題。它的完整的升級指南列出了重大更改。

Tailwind CSS 框架在 MIT 許可證下開源。與 Meta 的 Bootstrap 不同，Tailwind CSS 不包含高階元件（儘管這些元件在 TailwindUI 中可用，但需要商業許可）。

2023 年 CSS 現狀調查（2024 年結果目前尚未公佈）指出，“Tailwind CSS 是開發者樂於繼續使用的主要 UI 框架之一”，使用率為 50.5%，留存率為 75.7%。Bootstrap 的使用率較高，但目前略有下降。這兩個框架佔據主導地位，排名第三的 Materialize CSS 的使用率為 21.7%。

結語

關於 Tailwind 優點的討論顯示出了不同的觀點，包括使用原生 CSS 而不進行構建步驟的爭論。

作者Wathan 正是因為在大型專案中維護 CSS 檔案的挑戰而建立了 Tailwind。人們對重大更改的數量有些不滿，但正如一位開發人員所說， “更少的依賴和更好的效能總是受開發者歡迎的。”

然而，瀏覽器相容性是一個問題，與大多數初始版本一樣，開發人員會對生產的早期採用持謹慎態度，直到他們確信它適用於自己的使用者。