Tailwind CSS是一個開放原始碼CSS框架。這個工具庫的主要特點是，Bootstrap5 utilities 概念接近，與jQuery UI等其他 CSS 框架不同，沒有為按鈕或表格等元素提供一系列預定義類。相對的，會創建一個「工具程式型（Utility）」CSS 類別列表，這些類別可用於通過混搭和媒合來設定每個元素的樣式。
例如，在其他傳統系統中，會有一個類型並套用黃色背景顏色和粗體文字。要在 Tailwind 中實作如此結果，就必須套用由工具庫建立的一組類別：。
特徵
由於與 Bootstrap 等預處理CSS概念不同，因此了解 Tailwind 後處理如何建立的理念及其基本用法非常重要。
工具程式類別（Utility Classes）-
工具程式優先概念是指 Tailwind 的主要差異化特徵。 而非圍繞在組件（按鈕、面板、選單、文字框...）類別，而是圍繞特定樣式元素（黃色、粗體、非常大的文本、中心元素...）類別。這些類別內的每一個都稱為工具程式類別。TailwindCSS 中有許多工具程式類別，可以控制大量 CSS 屬性，如顏色、邊框、顯示類型（顯示）、字體大小和字體、排版、陰影......
變數
Tailwind 提供了僅在某些情況下通過媒體查詢（Media Query）工具程式類別的可能性，這稱為變數。變數的主要用途是為各種螢幕尺寸設計響應式使用者界面。 元素可以具有的不同狀態也有變數，例如滑鼠懸停時，鍵盤選擇時或按下滑鼠時， 或者當瀏覽器或作業系統開啟了暗模式（dark mode）時。
變數有兩個部分：要滿足的條件和滿足條件時套用的類型。例如，如果螢幕尺寸大於為 定義的值，則使用變數 將會應用類別 。
Tailwind CSS 使用 JavaScript 開發，通過 Node.js 執行，使用環境包裝管理工具（如 npm 或 yarn）安裝。
即時編譯（JIT）
即時編譯模式 (Just-In-Time) 是產生 CSS 的另一種方法，此方法並不是生成所有可能的類別，再刪除所有未使用的類別，而是解析 HTML 文件的內容（或設定的副檔名或路徑位置）和立即只產生那些所需要使用的類別。因為不再產生所有可能的變數，因而大幅減少了產生的 CSS 的等待時間和大小。這種技術改良使得引入許多新的變數和工具程式類別成為可能，以及使用未在設定中設定的任意值動態建立工具程式類別的能力。
從 Tailwind CSS 版本 3 開始，即時編譯模式將成為預設模式。
- Firefox
- Netlify
- NBA
- NASA
- Netflix
參見
- Bootstrap
外部連結
- [https://tailwindcss.com/docs Official Tailwind Documentation] .
- [https://play.tailwindcss.com Tailwind Play] , real-time testing environment.
參考文獻
评论 (0)