Tailwind CSS
Tailwind CSS是一個開放原始碼CSS框架。這個工具庫的主要特點是,Bootstrap5 utilities 概念接近,與jQuery UI等其他 CSS 框架不同,沒有為按鈕或表格等元素提供一系列預定義類。相對的,會創建一個「工具程式型(Utility)」CSS 類別列表,這些類別可用於通過混搭和媒合來設定每個元素的樣式。[4][5]
![]() | |
原作者 | Adam Wathan, Steve Schoger |
---|---|
開發者 | Tailwind Labs[1] |
当前版本 |
|
源代码库 | |
编程语言 | JavaScript |
平台 | Node.js |
语言 | English |
许可协议 | MIT許可證 [3] |
网站 | tailwindcss.com |
例如,在其他傳統系統中,會有一個message-warning
類型並套用黃色背景顏色和粗體文字。要在 Tailwind 中實作如此結果,就必須套用由工具庫建立的一組類別:bg-yellow-200
font-bold
。
特徵
由於與 Bootstrap 等預處理CSS概念不同,因此了解 Tailwind 後處理如何建立的理念及其基本用法非常重要。
工具程式類別(Utility Classes)-
工具程式優先概念是指 Tailwind 的主要差異化特徵。[6] 而非圍繞在組件(按鈕、面板、選單、文字框...)類別,而是圍繞特定樣式元素(黃色、粗體、非常大的文本、中心元素...)類別。這些類別內的每一個都稱為工具程式類別。TailwindCSS 中有許多工具程式類別,可以控制大量 CSS 屬性,如顏色、邊框、顯示類型(顯示)、字體大小和字體、排版、陰影......
變數
Tailwind 提供了僅在某些情況下通過媒體查詢(Media Query)工具程式類別的可能性,這稱為變數。變數的主要用途是為各種螢幕尺寸設計響應式使用者界面。[7] 元素可以具有的不同狀態也有變數,例如滑鼠懸停時hover:
,鍵盤選擇時focus:
或按下滑鼠時active:
,[8] 或者當瀏覽器或作業系統開啟了暗模式(dark mode)時。[9]
變數有兩個部分:要滿足的條件和滿足條件時套用的類型。例如,如果螢幕尺寸大於為 md
定義的值,則使用變數 md:bg-yellow-400
將會應用類別 bg-yellow-400
。
Tailwind CSS 使用 JavaScript 開發,通過 Node.js 執行,使用環境包裝管理工具(如 npm 或 yarn)安裝。[10]
設定和佈景
可以通過名為 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 使用語義版本控制來識別其版本兼容性。
著名使用
參見
外部連結
- Official Tailwind Documentation (页面存档备份,存于互联网档案馆).
- Tailwind Play (页面存档备份,存于互联网档案馆), real-time testing environment.
參考文獻
- ^ Tailwind Labs. [2022-08-31]. (原始内容存档于2022-09-01).
- ^ 2.0 2.1 Release 3.4.10. 2024年8月13日 [2024年8月27日].
- ^ Github: tailwindlabs/tailwindcss, LICENSE. [2022-08-31]. (原始内容存档于2021-10-20).
- ^ Gerchev, Ivaylo. Tailwind CSS. Sebastopol: O'Reilly Media. 2022. ISBN 1-0981-4099-0. OCLC 1314257318.
- ^ Rappin, Noel. Modern CSS with Tailwind flexible styling without the fuss. Raleigh. 2021. ISBN 978-1-68050-857-4. OCLC 1277046918.
- ^ Utility-First - Tailwind CSS. tailwindcss.com. [2021-11-13]. (原始内容存档于2022-09-09) (英语).
- ^ Responsive Design - Tailwind CSS. tailwindcss.com. [2021-11-13]. (原始内容存档于2022-09-09) (英语).
- ^ Hover, Focus, & Other States - Tailwind CSS. tailwindcss.com. [2021-11-13]. (原始内容存档于2022-09-09) (英语).
- ^ Dark Mode - Tailwind CSS. tailwindcss.com. [2021-11-13]. (原始内容存档于2022-09-03) (英语).
- ^ Installation - Tailwind CSS. tailwindcss.com. [2021-11-13]. (原始内容存档于2022-09-09) (英语).
- ^ 11.0 11.1 Release v3.0.0-alpha.1 tailwindlabs/tailwindcss. GitHub. [2021-11-13]. (原始内容存档于2022-08-24) (英语).
- ^ GitHub Copilot · Your AI pair programmer. GitHub Copilot. [2021-10-18]. (原始内容存档于2022-04-23) (英语).
- ^ Firefox Accounts. accounts.firefox.com. [2021-10-18]. (原始内容存档于2022-09-08).
- ^ From semantic CSS to Tailwind - Refactoring the Netlify UI codebase. Netlify. [2021-10-28]. (原始内容存档于2022-03-01) (英语).
- ^ The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com. www.nba.com. [2021-10-18]. (原始内容存档于2020-12-08) (英语).
- ^ NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration. NASA Jet Propulsion Laboratory (JPL). [2021-10-18]. (原始内容存档于2011-02-24) (英语).
- ^ Netflix Top 10 - Global. top10.netflix.com. [2021-11-21]. (原始内容存档于2021-11-16) (英语).