維基百科

Tailwind CSS

Tailwind CSS是一個開放原始碼CSS框架。這個工具庫的主要特點是，Bootstrap5 utilities 概念接近，與jQuery UI等其他 CSS 框架不同，沒有為按鈕或表格等元素提供一系列預定義類。相對的，會創建一個「工具程式型（Utility）」CSS 類別列表，這些類別可用於通過混搭和媒合來設置每個元素的樣式。[5][6]

Tailwind CSS
原作者Adam Wathan, Steve Schoger
開發者Tailwind Labs[1]
目前版本3.4.14[2]在維基數據編輯（2024年10月15日）
原始碼庫
編輯維基數據連結
程式語言TypeScript, Rust, CSS[3]
平台Node.js
語言English
許可協定MIT許可證 [4]
網站tailwindcss.com

例如，在其他傳統系統中，會有一個message-warning類型並套用黃色背景顏色和粗體文字。要在 Tailwind 中實作如此結果，就必須套用由工具庫建立的一組類別：bg-yellow-200font-bold。

特徵

編輯

由於與 Bootstrap 等預處理CSS概念不同，因此了解 Tailwind 後處理如何建立的理念及其基本用法非常重要。

工具程式類別（Utility Classes）-

編輯

工具程式優先概念是指 Tailwind 的主要差異化特徵。[7] 而非圍繞在組件（按鈕、面板、選單、文字框...）類別，而是圍繞特定樣式元素（黃色、粗體、非常大的文字、中心元素...）類別。這些類別內的每一個都稱為工具程式類別。TailwindCSS 中有許多工具程式類別，可以控制大量 CSS 屬性，如顏色、邊框、顯示類型（顯示）、字體大小和字體、排版、陰影......

範例：黃色告示
結果  
程式碼 
<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>
類別 Tailwind CSS 對應
m-4 margin: 1rem;
p-4 padding: 1rem;
bg-yellow-200 background-color: rgba(229, 231, 235, 1);
font-bold font-weight: 700;
rounded-lg border-radius: 0.5rem;

變數

編輯

Tailwind 提供了僅在某些情況下通過媒體查詢（Media Query）工具程式類別的可能性，這稱為變數。變數的主要用途是為各種螢幕尺寸設計響應式用戶介面。[8] 元素可以具有的不同狀態也有變數，例如滑鼠懸停時hover:，鍵盤選擇時focus:或按下滑鼠時active:，[9] 或者當瀏覽器或作業系統開啟了暗模式（dark mode）時。[10]

變數有兩個部分：要滿足的條件和滿足條件時套用的類型。例如，如果螢幕尺寸大於為 md定義的值，則使用變數 md:bg-yellow-400 將會應用類別 bg-yellow-400。

Tailwind CSS 使用 JavaScript 開發，通過 Node.js 執行，使用環境包裝管理工具（如 npm 或 yarn）安裝。[3]

設置和佈景

編輯

可以通過名為 tailwind.config.js的設定檔案設置 Tailwind 提供的工具程式類別和變數。在設置中，您可以設置工具程式類別的值，例如調色板或邊距元素之間的大小。

全部建置與消除

編輯

Tailwind 的預設模式是系統根據專案設置產生所有可能的 CSS 組合。然後，通過另一個工具程式（如 PurgeCSS），走訪所有檔案，並從產生的 CSS 檔案中刪除未使用的類別。由於變數的數量與其組合可以產生的類別的數量，這種方法的缺點是等待時間長，並且在消除之前的 CSS 檔案很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。[11]

即時編譯（JIT）

編輯

即時編譯模式 (Just-In-Time) 是產生 CSS 的另一種方法，此方法並不是生成所有可能的類別，再刪除所有未使用的類別，而是解析 HTML 檔案的內容（或設置的副檔名或路徑位置）和立即只產生那些所需要使用的類別。因為不再產生所有可能的變數，因而大幅減少了產生的 CSS 的等待時間和大小。這種技術改良使得引入許多新的變數和工具程式類別成為可能，以及使用未在設置中設置的任意值動態建立工具程式類別的能力。

從 Tailwind CSS 版本 3 開始，即時編譯模式將成為預設模式。[11]

版本

編輯

Tailwind CSS 使用語義版本控制來識別其版本相容性。

著名使用

編輯

參見

編輯

外部連結

編輯

參考文獻

編輯
  1. ^ Tailwind Labs. [2022-08-31]. （原始內容存檔於2022-09-01）. 
  2. ^ Release 3.4.14. 2024年10月15日 [2024年10月27日]. 
  3. ^ 3.0 3.1 Installation - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始內容存檔於2022-09-09） （英語）. 
  4. ^ Github: tailwindlabs/tailwindcss, LICENSE. [2022-08-31]. （原始內容存檔於2021-10-20）. 
  5. ^ Gerchev, Ivaylo. Tailwind CSS. Sebastopol: O'Reilly Media. 2022. ISBN 1-0981-4099-0. OCLC 1314257318. 
  6. ^ Rappin, Noel. Modern CSS with Tailwind flexible styling without the fuss. Raleigh. 2021. ISBN 978-1-68050-857-4. OCLC 1277046918. 
  7. ^ Utility-First - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始內容存檔於2022-09-09） （英語）. 
  8. ^ Responsive Design - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始內容存檔於2022-09-09） （英語）. 
  9. ^ Hover, Focus, & Other States - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始內容存檔於2022-09-09） （英語）. 
  10. ^ Dark Mode - Tailwind CSS. tailwindcss.com. [2021-11-13]. （原始內容存檔於2022-09-03） （英語）. 
  11. ^ 11.0 11.1 Release v3.0.0-alpha.1 tailwindlabs/tailwindcss. GitHub. [2021-11-13]. （原始內容存檔於2022-08-24） （英語）. 
  12. ^ GitHub Copilot · Your AI pair programmer. GitHub Copilot. [2021-10-18]. （原始內容存檔於2022-04-23） （英語）. 
  13. ^ Firefox Accounts. accounts.firefox.com. [2021-10-18]. （原始內容存檔於2022-09-08）. 
  14. ^ From semantic CSS to Tailwind - Refactoring the Netlify UI codebase. Netlify. [2021-10-28]. （原始內容存檔於2022-03-01） （英語）. 
  15. ^ The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com. www.nba.com. [2021-10-18]. （原始內容存檔於2020-12-08） （英語）. 
  16. ^ NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration. NASA Jet Propulsion Laboratory (JPL). [2021-10-18]. （原始內容存檔於2011-02-24） （英語）. 
  17. ^ Netflix Top 10 - Global. top10.netflix.com. [2021-11-21]. （原始內容存檔於2021-11-16） （英語）. 
取自 "https://zh.wikipedia.org/w/index.php?title=Tailwind_CSS&oldid=84620413"