|
Tailwind 提供了僅在某些情況下通過(guò)媒體查詢(xún)（Media Query）工具程式類(lèi)別的可能性，這稱(chēng)為變數。變數的主要用途是為各種螢幕尺寸設計響應式使用者界面。 元素可以具有的不同狀態(tài)也有變數，例如鼠標懸停時(shí)hover:，鍵盤(pán)選擇時(shí)focus:或按下鼠標時(shí)active:， 或者當瀏覽器或操作系統開(kāi)啟了暗模式（dark mode）時(shí)。
變數有兩個(gè)部分：要滿(mǎn)足的條件和滿(mǎn)足條件時(shí)套用的類(lèi)型。例如，如果螢幕尺寸大于為 md定義的值，則使用變數 md:bg-yellow-400 將會(huì )應用類(lèi)別 bg-yellow-400。
Tailwind CSS 使用 Javascript 開(kāi)發(fā)，通過(guò) Node.js 執行，使用環(huán)境包裝管理工具（如 npm 或 yarn）安裝。
設定和布景
可以通過(guò)名為 tailwind.config.js的設定檔案設定 Tailwind 提供的工具程式類(lèi)別和變數。在設定中，您可以設定工具程式類(lèi)別的值，例如調色板或邊距元素之間的大小。
全部建置與消除
Tailwind 的預設模式是系統根據專(zhuān)案設定產(chǎn)生所有可能的 CSS 組合。然后，通過(guò)另一個(gè)工具程式（如 PurgeCSS），走訪(fǎng)所有檔案，并從產(chǎn)生的 CSS 檔案中刪除未使用的類(lèi)別。由于變數的數量與其組合可以產(chǎn)生的類(lèi)別的數量，這種方法的缺點(diǎn)是等待時(shí)間長(cháng)，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即時(shí)編譯（JIT）
即時(shí)編譯模式 (Just-In-Time) 是產(chǎn)生 CSS 的另一種方法，此方法并不是生成所有可能的類(lèi)別，再刪除所有未使用的類(lèi)別，而是解析 HTML 文件的內容（或設定的副檔名或路徑位置）和立即只產(chǎn)生那些所需要使用的類(lèi)別。因為不再產(chǎn)生所有可能的變數，因而大幅減少了產(chǎn)生的 CSS 的等待時(shí)間和大小。這種技術(shù)改良使得引入許多新的變數和工具程式類(lèi)別成為可能，以及使用未在設定中設定的任意值動(dòng)態(tài)建立工具程式類(lèi)別的能力。
從 Tailwind CSS 版本 3 開(kāi)始，即時(shí)編譯模式將成為預設模式。
版本
Tailwind CSS 使用語(yǔ)義版本控制來(lái)識別其版本兼容性。
著(zhù)名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
Tailwind CSS | | 原作者 | Adam Wathan, Steve Schoger |
|---|
| 開(kāi)發(fā)者 | Tailwind Labs |
|---|
| 當前版本 |
|
|---|
| 源代碼庫 | - github.com/tailwindlabs/tailwindcss
|
|---|
| 編程語(yǔ)言 | Javascript |
|---|
| 平臺 | Node.js |
|---|
| 語(yǔ)言 | English |
|---|
| 許可協(xié)議 | MIT許可證 |
|---|
| 網(wǎng)站 | tailwindcss.com |
|---|
Tailwind CSS是一個(gè)開(kāi)放源代碼CSS框架。這個(gè)工具庫的主要特點(diǎn)是，Bootstrap5 utilities 概念接近，與jQuery UI等其他 CSS 框架不同，沒(méi)有為按鈕或表格等元素提供一系列預定義類(lèi)。相對的，會(huì )創(chuàng )建一個(gè)“工具程式型（Utility）”CSS 類(lèi)別列表，這些類(lèi)別可用于通過(guò)混搭和媒合來(lái)設定每個(gè)元素的樣式。
例如，在其他傳統系統中，會(huì )有一個(gè)message-warning類(lèi)型并套用黃色背景顏色和粗體文字。要在 Tailwind 中實(shí)作如此結果，就必須套用由工具庫建立的一組類(lèi)別：bg-yellow-200font-bold。
特征
由于與 Bootstrap 等預處理CSS概念不同，因此了解 Tailwind 后處理如何建立的理念及其基本用法非常重要。
工具程式類(lèi)別（Utility Classes）-
工具程式優(yōu)先概念是指 Tailwind 的主要差異化特征。 而非圍繞在組件（按鈕、面板、選單、文字框...）類(lèi)別，而是圍繞特定樣式元素（黃色、粗體、非常大的文本、中心元素...）類(lèi)別。這些類(lèi)別內的每一個(gè)都稱(chēng)為工具程式類(lèi)別。TailwindCSS 中有許多工具程式類(lèi)別，可以控制大量 CSS 屬性，如顏色、邊框、顯示類(lèi)型（顯示）、字體大小和字體、排版、陰影......
示例：黃色告示
| 結果
|
Tailwind 提供了僅在某些情況下通過(guò)媒體查詢(xún)（Media Query）工具程式類(lèi)別的可能性，這稱(chēng)為變數。變數的主要用途是為各種螢幕尺寸設計響應式使用者界面。 元素可以具有的不同狀態(tài)也有變數，例如鼠標懸停時(shí)hover:，鍵盤(pán)選擇時(shí)focus:或按下鼠標時(shí)active:， 或者當瀏覽器或操作系統開(kāi)啟了暗模式（dark mode）時(shí)。
變數有兩個(gè)部分：要滿(mǎn)足的條件和滿(mǎn)足條件時(shí)套用的類(lèi)型。例如，如果螢幕尺寸大于為 md定義的值，則使用變數 md:bg-yellow-400 將會(huì )應用類(lèi)別 bg-yellow-400。
Tailwind CSS 使用 Javascript 開(kāi)發(fā)，通過(guò) Node.js 執行，使用環(huán)境包裝管理工具（如 npm 或 yarn）安裝。
設定和布景
可以通過(guò)名為 tailwind.config.js的設定檔案設定 Tailwind 提供的工具程式類(lèi)別和變數。在設定中，您可以設定工具程式類(lèi)別的值，例如調色板或邊距元素之間的大小。
全部建置與消除
Tailwind 的預設模式是系統根據專(zhuān)案設定產(chǎn)生所有可能的 CSS 組合。然后，通過(guò)另一個(gè)工具程式（如 PurgeCSS），走訪(fǎng)所有檔案，并從產(chǎn)生的 CSS 檔案中刪除未使用的類(lèi)別。由于變數的數量與其組合可以產(chǎn)生的類(lèi)別的數量，這種方法的缺點(diǎn)是等待時(shí)間長(cháng)，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即時(shí)編譯（JIT）
即時(shí)編譯模式 (Just-In-Time) 是產(chǎn)生 CSS 的另一種方法，此方法并不是生成所有可能的類(lèi)別，再刪除所有未使用的類(lèi)別，而是解析 HTML 文件的內容（或設定的副檔名或路徑位置）和立即只產(chǎn)生那些所需要使用的類(lèi)別。因為不再產(chǎn)生所有可能的變數，因而大幅減少了產(chǎn)生的 CSS 的等待時(shí)間和大小。這種技術(shù)改良使得引入許多新的變數和工具程式類(lèi)別成為可能，以及使用未在設定中設定的任意值動(dòng)態(tài)建立工具程式類(lèi)別的能力。
從 Tailwind CSS 版本 3 開(kāi)始，即時(shí)編譯模式將成為預設模式。
版本
Tailwind CSS 使用語(yǔ)義版本控制來(lái)識別其版本兼容性。
著(zhù)名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
參見(jiàn)
外部鏈接
- Official Tailwind newlineation （頁(yè)面存檔備份，存于互聯(lián)網(wǎng)檔案館）.
- Tailwind Play （頁(yè)面存檔備份，存于互聯(lián)網(wǎng)檔案館）, real-time testing environment.
Tailwind CSS | | 原作者 | Adam Wathan, Steve Schoger |
|---|
| 開(kāi)發(fā)者 | Tailwind Labs |
|---|
| 當前版本 |
|
|---|
| 源代碼庫 | - github.com/tailwindlabs/tailwindcss
|
|---|
| 編程語(yǔ)言 | Javascript |
|---|
| 平臺 | Node.js |
|---|
| 語(yǔ)言 | English |
|---|
| 許可協(xié)議 | MIT許可證 |
|---|
| 網(wǎng)站 | tailwindcss.com |
|---|
Tailwind CSS是一個(gè)開(kāi)放源代碼CSS框架。這個(gè)工具庫的主要特點(diǎn)是，Bootstrap5 utilities 概念接近，與jQuery UI等其他 CSS 框架不同，沒(méi)有為按鈕或表格等元素提供一系列預定義類(lèi)。相對的，會(huì )創(chuàng )建一個(gè)“工具程式型（Utility）”CSS 類(lèi)別列表，這些類(lèi)別可用于通過(guò)混搭和媒合來(lái)設定每個(gè)元素的樣式。
例如，在其他傳統系統中，會(huì )有一個(gè)message-warning類(lèi)型并套用黃色背景顏色和粗體文字。要在 Tailwind 中實(shí)作如此結果，就必須套用由工具庫建立的一組類(lèi)別：bg-yellow-200font-bold。
特征
由于與 Bootstrap 等預處理CSS概念不同，因此了解 Tailwind 后處理如何建立的理念及其基本用法非常重要。
工具程式類(lèi)別（Utility Classes）-
工具程式優(yōu)先概念是指 Tailwind 的主要差異化特征。 而非圍繞在組件（按鈕、面板、選單、文字框...）類(lèi)別，而是圍繞特定樣式元素（黃色、粗體、非常大的文本、中心元素...）類(lèi)別。這些類(lèi)別內的每一個(gè)都稱(chēng)為工具程式類(lèi)別。TailwindCSS 中有許多工具程式類(lèi)別，可以控制大量 CSS 屬性，如顏色、邊框、顯示類(lèi)型（顯示）、字體大小和字體、排版、陰影......
示例：黃色告示
| 結果
|
Tailwind 提供了僅在某些情況下通過(guò)媒體查詢(xún)（Media Query）工具程式類(lèi)別的可能性，這稱(chēng)為變數。變數的主要用途是為各種螢幕尺寸設計響應式使用者界面。 元素可以具有的不同狀態(tài)也有變數，例如鼠標懸停時(shí)hover:，鍵盤(pán)選擇時(shí)focus:或按下鼠標時(shí)active:， 或者當瀏覽器或操作系統開(kāi)啟了暗模式（dark mode）時(shí)。
變數有兩個(gè)部分：要滿(mǎn)足的條件和滿(mǎn)足條件時(shí)套用的類(lèi)型。例如，如果螢幕尺寸大于為 md定義的值，則使用變數 md:bg-yellow-400 將會(huì )應用類(lèi)別 bg-yellow-400。
Tailwind CSS 使用 Javascript 開(kāi)發(fā)，通過(guò) Node.js 執行，使用環(huán)境包裝管理工具（如 npm 或 yarn）安裝。
設定和布景
可以通過(guò)名為 tailwind.config.js的設定檔案設定 Tailwind 提供的工具程式類(lèi)別和變數。在設定中，您可以設定工具程式類(lèi)別的值，例如調色板或邊距元素之間的大小。
全部建置與消除
Tailwind 的預設模式是系統根據專(zhuān)案設定產(chǎn)生所有可能的 CSS 組合。然后，通過(guò)另一個(gè)工具程式（如 PurgeCSS），走訪(fǎng)所有檔案，并從產(chǎn)生的 CSS 檔案中刪除未使用的類(lèi)別。由于變數的數量與其組合可以產(chǎn)生的類(lèi)別的數量，這種方法的缺點(diǎn)是等待時(shí)間長(cháng)，并且在消除之前的 CSS 文件很大。此操作模式在 Tailwind CSS 版本 3 中不再可用。
即時(shí)編譯（JIT）
即時(shí)編譯模式 (Just-In-Time) 是產(chǎn)生 CSS 的另一種方法，此方法并不是生成所有可能的類(lèi)別，再刪除所有未使用的類(lèi)別，而是解析 HTML 文件的內容（或設定的副檔名或路徑位置）和立即只產(chǎn)生那些所需要使用的類(lèi)別。因為不再產(chǎn)生所有可能的變數，因而大幅減少了產(chǎn)生的 CSS 的等待時(shí)間和大小。這種技術(shù)改良使得引入許多新的變數和工具程式類(lèi)別成為可能，以及使用未在設定中設定的任意值動(dòng)態(tài)建立工具程式類(lèi)別的能力。
從 Tailwind CSS 版本 3 開(kāi)始，即時(shí)編譯模式將成為預設模式。
版本
Tailwind CSS 使用語(yǔ)義版本控制來(lái)識別其版本兼容性。
著(zhù)名使用
- GitHub
- Firefox
- Netlify
- NBA
- NASA
- Netflix
參見(jiàn)
| | | 
