什麼是 Tailwind CSS？

Tailwind CSS 是一個以工具為先的 CSS 框架，用於快速建立現代網站而無需離開您的 HTML。

Tailwind CSS 通過掃描您的所有 HTML 文件、JavaScript 組件以及任何其他模板中的類名，生成相應的樣式，然後將它們寫入一個靜態的 CSS 文件中。

它快速、靈活且可靠 —— 零運行時。

特點

由於與其他傳統 CSS 框架（如 Bootstrap）在基本概念上的不同，了解 Tailwind 創建的哲學以及其基本使用方法是很重要的。

工具類

工具為先的概念指的是 Tailwind 的主要區別特徵。不是圍繞組件（按鈕、面板、菜單、文本框...）創建類，而是圍繞特定風格元素（黃色、粗體字、非常大的文本、元素居中...）建立類。這些類被稱為工具類。

Tailwind CSS 中有許多工具類，使得能夠控制大量的 CSS 屬性，如顏色、邊框、顯示類型（display）、字體大小和字體、布局、陰影...

變體

Tailwind 提供了通過媒體查詢在某些情況下僅應用工具類的可能性，這稱為變體。變體的主要用途是為各種屏幕大小設計響應式界面。還有用於元素可以有的不同狀態的變體，例如當懸停時的 hover:，鍵盤選中時的 focus:，使用中或當瀏覽器或操作系統啟用深色模式時的 active:。

變體有兩部分：滿足的條件和如果條件滿足則應用的類。例如，變體 md:bg-yellow-400 將在屏幕大小大於為 md 定義的值時應用類 bg-yellow-400。

Tailwind CSS 使用 JavaScript 開發，通過 Node.js 運行，並可通過如 npm 或 yarn 這樣的環境包管理器安裝。

設置和主題

可以通過一個通常命名為 tailwind.config.js 的配置文件配置 Tailwind 提供的工具類和變體。在配置中，可以設定工具類的值，如顏色調色板或元素間邊距的大小。

全部構建和清除

Tailwind 的默認模式是，系統基於項目設置生成所有可能的 CSS 組合。然後，通過如 PurgeCSS 這樣的另一個工具，遍歷所有文件，並從結果 CSS 文件中刪除未被使用的類。

由於可能由於變體及其組合的數量生成的類的數量，這種方法在被清除前有長時間等待和 CSS 文件的大尺寸的缺點。在 Tailwind CSS 的第 3 版中，這種操作模式不再可用。

即時模式

JIT 模式（即時）是生成 CSS 的另一種方式，不是生成所有可能的類然後刪除所有未被使用的，而是解析 HTML 文件（或配置的擴展名或位置）的內容，並立即只生成那些需要和使用的類。

因為不再生成所有可能的變量，所以生成的 CSS 文件的等待時間和大小大大減少。這項技術改進使得能夠引入眾多新的變體和工具類，以及能夠即興創建配置中未設定的任意值的工具類。

從 Tailwind CSS 的第 3 版開始，JIT 模式已成為默認。