Tailwind CSS 為什麽這麽火？

2024-03-07碼農

全文約 9000 字，預計閱讀需要 30 分鐘。

近年來，Tailwind CSS 在前端開發領域備受關註，在GitHub上收獲了70000+ Star。盡管市面上有眾多的 CSS 框架可供選擇，但 Tailwind CSS 憑借其獨特的概念、強大的特性和靈活性越來越受到開發者的喜愛。那麽，為何 Tailwind CSS 如此受歡迎呢？本文將深入探討這個問題，並介紹 Tailwind CSS 的概念、特性、技巧和元件庫，以更好地理解和使用它！

Tailwind CSS 概念

Summer IS HERE

Summer

原子 CSS

在學習 Tailwind CSS 之前，先來了解一下什麽是原子 CSS。

# 」

原子 CSS（Atomic CSS）是一種 CSS 架構方法，旨在透過使用單一的、獨立的類來構建樣式，從而提供可重用且高度可組合的樣式規則。

例如，使用以下 CSS 建立一個 bg-blue 類：

.bg-blue{ background-color:rgb(81, 191, 255); }

如果將此類添加到 <h1> 標簽中，它將獲得藍色背景，顏色如上面程式碼 rgb(81, 191, 255) 所示。

HTML 如下：

效果如下：

# ON

我們可以編寫這種 單一用途的 CSS 規則 並將它們全部保存在 全域 CSS 檔 中。這樣就可以在任何地方使用這些單一用途的實用程式類。只需要在 HTML 中來使用這些全域 CSS 檔即可，還可以在單個 HTML 標簽中使用這些類的組合。

來看另一個例子，有以下規則的 CSS：

.bg-blue{ background-color:rgb(81, 191, 255); } .bg-green{ background-color:rgb(81, 255, 90); } .text-underline{ text-decoration: underline; } .text-center{ text-align: center; } .font-weight-400{ font-weight: 400; }

然後在 HTML 檔中使用它，如下所示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge"/> <meta name="viewport"content="width=device-width, initial-scale=1.0"/> <title>Document</title> <link rel=" stylesheet"href=" style.css"/> </head> <body> <div><h1 class="bg-blue">Hello world 1</h1></div> <div><h1 class="text-underline">Hello world 2</h1></div> <div class="text-center"> <h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1> </div> </body> </html>

效果如下：

# ON

可以看到：

組合多個實用程式類 ：第 14 行中組合了多個類，即 bg-green 、 font-weight-400 和 text-underline 。這些樣式在 Hello world 3 文本中都生效了。

實用程式類的可重用性 ：第 12 行和第 14 行中多次使用了 text-underline 類。

當然，如果想遵循這種原子 CSS 架構，就需要建立多個單一用途的實用程式類。這就是 Tailwind CSS 的用武之地。原子 CSS 的概念並不新鮮，但 Tailwind CSS 將其提升到了另一個水平。

Summer

Tailwind CSS 是什麽？

Tailwind CSS 是一個實用優先的 CSS 框架，旨在使使用者能夠更快、更輕松地建立套用。可以使用實用程式類來控制布局、顏色、間距、排版、陰影等，以建立完全自訂的元件設計，Tailwind CSS 在 Github 上有 70.6k Star，並且 npm 周安裝量達到了 636w+。

# ON

一開始對 Tailwind CSS 的印象並不太好，而更喜歡幹凈的 HTML 幹凈以及語意化的類名，後者在前端關註點分離中發揮著重要作用。使用 Tailwind 和這麽多的類很奇怪，讓我想起了行內樣式。不過，隨著時代的變化，HTML、CSS 和 JavaScript 之間的聯系也在變化。這開啟了改變類在計畫中的角色的可能性，並且實用程式優先的方法非常適合現代的、基於 JavaScript 的時代。

Tailwind 是一個 CSS 框架，但它並不是新的 Bootstrap。Bootstrap 等傳統 CSS 框架為使用者提供了許多預定義的功能，如元件和布局系統。而 Tailwind 並非如此，因為它不附帶預定義元件。兩者的目標都是讓開發更輕松，但實作方式有所不同：傳統框架試圖避免CSS 及其復雜性，而 Tailwind CSS 希望改變編寫 CSS 的方式。因此，與其他 CSS 框架相比，它提供了更大的靈活性和控制力。

Tailwind CSS 有很多優勢：

編寫的自訂 CSS 更少 ：使用 Tailwind，可以透過直接在HTML中套用預先存在的類來設定元素的樣式。透過以這種方式使用實用程式類，可以構建自訂設計而無需編寫 CSS。

可以保持 CSS 檔較小 ：如果沒有像 Tailwind 這樣的框架，就必須在添加新功能和元件時繼續編寫 CSS。這樣 CSS 檔不斷增長並變得越來越大。透過使用 Tailwind 的等實用程式，大多數樣式都是可重用的，因此很少需要編寫新的 CSS。

不必定義類名 ：使用 Tailwind 時，可以從預定義的設計系統中選擇類。這意味著無需為某些樣式和元件選擇「完美」的類名而煩惱，也無需記住像 sidebar-inner-wrapper 這樣復雜的類名。

可以做出更安全的更改 ：使用傳統方法，如果對 CSS 進行更改，則可能會破壞網站上的某些內容。不同於 CSS，在HTML中使用的實用類是局部的。這意味著可以更改它們而不必擔心影響站點上其他部份的功能。

Summer

Tailwind CSS 核心理念

學習如何使用 Tailwind CSS 最重要的部份實際上是使用它的類，理解實用程式優先的方法。

假設想要設計一個簡單的按鈕樣式：

<button class="btn"> 按鈕 </button>

傳統的方法如下所示：

.btn{ display: inline-block; border: 1px solid #34D399; background-color: transparent; border-radius: 0.375rem; padding: 0.5rem 1.5rem; color: #34D399; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color 300ms, color 300ms; } .btn:hover{ background-color: #34D399; color: #FFF; }

使用 Tailwind CSS，無需編寫一行 CSS 即可重新建立此按鈕，而是使用一堆低階實用程式類：

<button class="inline-block border border-green-400 bg-transparent rounded-md py-2 px-6 text-green-400 leading-none cursor-pointer hover:bg-green-400 hover:text-white transition-colors duration-300"> Example </button>

可以看到，這裏使用了很多類來為之前相同的按鈕樣式設定樣式，但每個類只管理一個或幾個經常一起使用的CSS內容。這些類的命名描述了它們的功能： inline-block 將CSS的 display 內容設定為 display: inline-block; ， bg-transparent 將 background-color 內容設定為 background-color: transparent; ，而 cursor-pointer 則將 cursor 內容設定為 cursor: pointer; 。

有些類看起來不太直觀，比如 py-2 用於管理垂直內邊距，而 px-6 用於管理水平內邊距。還有一些類同時設定多個內容，比如 transition-colors ：

.transition-colors{ transition-property: background-color,border-color,color,fill,stroke; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }

盡管有些類不太容易理解，但基本概念始終是相同的。除了基礎知識、自訂和外掛程式外，官方文件的所有章節都致力於解釋Tailwind生成的類的名稱和預設值，幾乎涵蓋了每個常用的CSS內容，甚至一些不太常見的內容。

Tailwind CSS 特性

Summer IS HERE

Summer

響應式設計

Tailwind CSS預設支持響應式設計，這意味著它生成的每個類都有對應的變體，只在特定的媒體查詢匹配時才套用。預設情況下，Tailwind是以行動裝置優先的方式進行設計的： 它的所有媒體查詢都是基於 min-width 的型別 。每個類都會根據每個斷點生成一個對應的變體，例如，可以使用 sm 斷點來表示 640px 。因此，如果想要在螢幕寬度達到640px及以上時套用 text-white 類，可以寫作 sm:text-white 。還可以結合響應式和狀態變體，例如使用 sm:hover:text-white 表示在螢幕寬度達到 640px 及以上且處於 hover 狀態時套用 text-white 類。

Summer

函式和指令

透過使用指令和函式，可以更靈活地客製和擴充套件你的CSS樣式，並結合Tailwind的強大功能實作更高效的開發。

指令

Tailwind 指令是用於執行各種操作的特殊聲明，比如使用 @variants 指令生成一些類的變體，或者使用帶有 @screen 指令的 Tailwind 媒體查詢。對於 @apply 指令需要特別註意，這個指令允許在自訂樣式中使用 Tailwind的實用類：

.custom-button{ @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }

這裏使用 @apply 指令將Tailwind的實用類套用到 .custom-button 類上，以快速設定背景顏色、文字顏色、字型加粗、內邊距和圓角等樣式。

函式

Tailwind還提供了一些函式，用於在CSS中動態生成樣式。例如，可以使用 theme 函式來獲取配置檔中的顏色值：

.btn-primary{ background-color:theme('colors.blue.500'); }

這裏使用 theme 函式來獲取配置檔中 blue.500 定義的顏色，並將其作為背景顏色套用到 .btn-primary 類。

Summer

客製化

預設的 Tailwind CSS 設定非常適合非常通用的用例，但如果計畫需要，也可以根據需要調整和自訂實用程式類。Tailwind 計畫中通常有兩個配置檔：框架內部使用的一個，以及可以在計畫根目錄下建立的 tailwind.config.js 檔。每次構建計畫時，在生成所有實用程式類之前，Tailwind 都會尋找自訂配置檔，找到後它會嘗試將其與內部配置合並，作為未指定的參數的後備。因此，自訂配置檔可以指定僅生成幾個類的設定，但如果沒有指定任何相關內容，則所有 Tailwind 預設類都將繼續工作。

檔結構

每個 Tailwind CSS 配置檔至少有以下參數：

module.exports ={ purge:[], presets:[], darkMode: false,// or 'media' or ' class' theme:{ screens:{}, colors:{}, spacing:{}, }, variantOrder:[ 'first', 'last', 'odd', ], variants:{ accessibility:['responsive','focus-within','focus'], alignContent:['responsive'], alignItems:['responsive'],/* etc. */ }, plugins:[], }

某些設定（例如 presets ）與實用程式類自訂無關。 darkMode 參數為類啟用暗模式變體，外掛程式允許使用更多功能和實用程式類（例如 Tailwind Typography）來擴充套件 Tailwind，這對於 Markdown 生成的內容樣式非常有用。還有更多設定，官方文件有詳細描述，但最重要的是 theme 、 variants 和 purge 。

Summer

theme

在 theme 中能夠自訂調色盤、響應能力和容器設定、間距實用程式甚至占位符不透明度實用程式。最常見的更改實用程式是斷點、調色盤和間距。

自訂斷點

計畫的斷點在 screens 物件中進行管理：

module.exports ={ theme:{ screens:{ sm:'640px', md:'768px', lg:'1024px', xl:'1280px', '2xl':'1536px', }, }, }

預設情況下，Tailwind 不僅生成實用程式的普通版本，例如 text-white ，而且還為 screens 物件內指定的每個斷點生成響應變體： sm:text-white 、 md:text-white 、 xl:text-white 。這裏可以包含更多或更少的斷點，並且 screens 物件支持各種程度的自訂，例如，使用桌面優先最大寬度媒體查詢，或使用最小和最大寬度的範圍媒體查詢。

自訂調色盤

調色盤在顏色 colors 內部進行管理：

module.exports ={ theme:{ colors:{ transparent:'transparent', current:'currentColor', teal:{ 50:'#f0fdfa', 100:'#ccfbf1', 200:'#99f6e4', }, emerald:{ 50:'#ecfdf5', 100:'#d1fae5', 200:'#a7f3d0', }, }, }, }

當提供字串參數時，Tailwind 將為該顏色生成所有與顏色相關的實用程式，例如 bg-transparent 、 border-transparent 等。當提供物件時，實用程式將像 bg-teal-50 、 text-emerald-200 中那樣「巢狀」。還可以在物件內提供特殊的 DEFAULT 值，Tailwind 將生成該顏色的「非巢狀」版本：

module.exports ={ theme:{ colors:{ emerald:{ DEFAULT:'#059669',// Generates bg-emerald, text-emerald, border-emerald... 50:'#ecfdf5', 100:'#d1fae5', 200:'#a7f3d0', }, }, }, }

這樣的巢狀邏輯適用於 Tailwind 支持的幾乎所有實用程式。註意，一切都是基於物件的：這就是為什麽在使用 theme() 函式從自訂 CSS 存取巢狀實用程式時必須使用點表示法。

自訂間距

Tailwind 配置中的間距物件本身不會生成任何實用程式。它是許多實際實用程式預設繼承的設定物件，正如在預設配置中看到的那樣：

module.exports ={ theme:{ margin:(theme,{ negative })=>({ auto:'auto', ...theme('spacing'), ...negative(theme('spacing')), }), padding:(theme)=>theme('spacing'), width:(theme)=>({ auto:'auto', ...theme('spacing'), '1/2':'50%', /* ...and so on */ }), }, }

它的使用非常簡單，只需根據需要修改鍵/值對，所有與間距相關的實用程式（例如 padding 或 margin ）將預設繼承這些值。

module.exports ={ theme:{ spacing:{ px:'1px', 0:'0px', 0.5:'0.125rem', 1:'0.25rem', 1.5:'0.375rem', 2:'0.5rem', 2.5:'0.625rem', 3:'0.75rem', /* ...and so on */ }, }, }

Summer

覆蓋或擴充套件

自訂主題時，可以為自訂的每個實用程式擴充套件或覆蓋 Tailwind 的預設值。預設情況下，當在 theme 物件內設定實用程式時，將覆蓋預設值。以過渡持續時間為例。在預設配置檔中，其值為：

module.exports ={ theme:{ transitionDuration:{ DEFAULT:'150ms', 75:'75ms', 100:'100ms', 150:'150ms', 200:'200ms', 300:'300ms', 500:'500ms', 700:'700ms', 1000:'1000ms', }, }, }

這將使用諸如 duration-300 之類的類來聲明 300ms 的過渡持續時間。如果在自訂 tailwind.config.js 檔中聲明：

module.exports ={ theme:{ transitionDuration:{ 2000:'2000ms', }, }, }

Tailwind會生成一個名為 duration-2000 的類，將過渡時長設定為2000毫秒。但是，將失去其他類，如 duration-300 或用於過渡時長為150毫秒的預設類。實際上，這種方法可能更好，因為這樣 Tailwind CSS 只會生成實際使用的類，這在開發模式下可以提高效能。

如果在上面的範例中，預設值已經滿足需求，可以進行擴充套件。想擴充套件的每個工具都必須放在特殊的 extend 物件內。下面透過擴充套件預設工具來添加一個2000毫秒的過渡時長，而不是替換它們：

module.exports ={ theme:{ extend:{ transitionDuration:{ 2000:'2000ms', }, } }, }

這樣就可以使用 duration-2000 類，而不會遺失 duration-300 和所有其他預設實用程式。

Summer

變體

可以為每個實用程式生成許多變體： hover 、 visited 、 focus 、 checked 、 active 、 odd 、 even 等，為每個工具生成所有可能的變體會導致生成成千上萬個無用的類，構建過程緩慢，開發模式下生成巨大的CSS檔，並且需要清理許多無用的樣式以進行生產。因此，預設情況下，只有響應式變體是始終啟用的，而其他所有變體只有在你期望找到它們的地方才會被預設啟用（例如， backgroundColor 工具的 hover 變體）。

變體物件中的每個內容都必須有一個實用程式名稱作為鍵，並以一組啟用的變體作為值：

module.exports ={ variants:{ accessibility:['responsive','focus-within','focus'], alignContent:['responsive'], alignItems:['responsive'], }, }

與 theme 一樣，在自訂變體時，可以覆蓋或擴充套件實用程式的設定：

module.exports ={ variants:{ // 除了預設值之外，還將生成「active」變體 extend:{ backgroundColor:['active'] } }, }

指定變體的順序很重要。變體是由陣列定義的，它們在陣列中的順序決定了相對類在最終樣式表中的位置。這很重要，因為一個元素可以同時處於活動和焦點狀態下：優先使用的類別不是由在HTML元素中輸入它們的順序決定的，而是由這些類在最終CSS中的順序決定的。

當覆蓋變體時，對於給定的工具，可以完全控制陣列，但在擴充套件它們時則不能。透過擴充套件添加的變體會被Tailwind自動排序，遵循一個內部順序，可以使用 variantOrder 參數自訂該順序。

Summer

清除

預設情況下，Tailwind 生成如此多的類，最終未壓縮的 CSS 大小達到 3739.4 kB，這是巨大的。可以仔細選擇要啟用或禁用的實用程式，禁用所有未使用的變體和不太常見的斷點，但最終仍然需要清除所有未使用的類和變體。

Tailwind CSS 使用 PurgeCSS 來對未使用的樣式進行 tree-shake 並獲得更小的最終 CSS。預設情況下，PurgeCSS 僅在生產模式下執行。

配置檔公開了可以根據需要自訂的清除參數。首先，可以使用 Tailwind CSS 實用程式提供每個檔的簡單路徑陣列，以便 PurgeCSS 可以檢測要保留哪些類以及要刪除哪些類：

module.exports ={ purge:[ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], theme:{}, variants:{}, plugins:[], }

重要的是要包含按名稱參照 Tailwind 實用程式之一的每個可能檔，例如動態切換某些類的 JavaScript 檔；如果不這樣做，PurgeCSS 將看不到這些類在其他地方使用，並且如果不在其他地方使用，則會將其刪除。

Tailwind CSS 技巧

Summer IS HERE

這一部份來探討一些可以顯著增強開發體驗的 Tailwind 技巧。

Summer

動態實用程式類

Tailwind 會清除未使用的類，這就是為什麽它能夠擁有如此多的功能，同時仍然保持我 CSS 包尺寸較小。因此，如果想使用動態類名，則需要將所有想要的類名寫入程式碼中的某個位置。這是為了讓 Tailwind 能夠靜態分析程式碼。

例如，這樣是行不通的：

constDoesntWork=()=>{ const colors =['red','green','yellow']; const[color, setColor]= React.useState(colors[0]); constchangeColor=()=>{ setColor('green'); }; return( <> <div className={`w-40 h-40 border bg-${color}-500`}></div> <select value={color} className={`bg-${color}-500`} onChange={(e)=>setColor(e.target.value)} > <option value="">choose</option> {colors.map((c)=>( <option key={c} value={c}> {c} </option> ))} </select> <button onClick={changeColor}>Change color</button> </> ); };

這是因為 Tailwind 無法靜態地找到它的類。 bg-${color}-500 需要在執行時進行評估。但是，如果確實使用完整的類名，Tailwind 編譯器可以使其工作：

constWorks=()=>{ const colors =['bg-red-500','bg-green-500','bg-yellow-500']; const[color, setColor]= React.useState(colors[0]); constchangeColor=()=>{ setColor('bg-green-500'); }; return( <> <div className={`w-40 h-40 border ${color}`}></div> <select value={color} className={`${color}`} onChange={(e)=>setColor(e.target.value)} > <option value="">choose</option> {colors.map((c)=>( <option key={c} value={c}> {c} </option> ))} </select> <button onClick={changeColor}>Change color</button> </> ); };

Summer

在 CSS 中使用 Tailwind

有時需要使用 CSS 來設計樣式，例如，當使用第三方庫時。這時就可以透過使用 @apply 指令或 theme 函式來使用 Tailwind 顏色，下面來看一個例子：

.__some-external- class{ /* 透過 @apply 可以使用 Tailwind 中的任何實用程式類名稱 */ @apply text-blue-300 bg-gray-300 py-2 px-6 rounded-lg uppercase; /* 或使用 theme() 函式 */ color:theme('colors.blue.300'); background-color:theme('colors.gray.300'); padding:theme('padding.2')theme('padding.6'); border-radius:theme('borderRadius.lg'); text-transform: uppercase; }

Summer

任意值

在 Tailwind 中編寫純 CSS 的另一種方法是使用方括弧 ( [] )。這就是所謂的「任意值」。可以這樣做：

<div class="w-[100vw] bg-[rebbecapurple]"></div>

更重要的是，還可以使用 theme 函式：

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">  </div>

如果想參照 CSS 自訂內容，則無需使用 var 關鍵字（自 v3.3 起）。可以直接將 CSS 變量作為任意值傳遞：

<div class="bg-[--my-color]">  </div>

此外，還可以輕松定義自訂變量，如下所示：

<div class="--my-color: rebbecapurple"> <h1 class="bg-[--my-color]">Hello</h1> </div>

Summer

group 和 peer 實用程式類

Tailwind 允許使用幫助類（如 :hover 、 :checked 、 :disabled 、 :focus 等）根據元素的狀態來更改其樣式。因此，可以輕松實作以下效果：

<button class="bg-purple-500 border border-blue-500 text-white text-2xl uppercase p-6 rounded-md m-4 transition-colors hover:bg-purple-800 hover:border-blue-200 hover:text-gray-200">Click me!</button>

結果如下：

# ON

如果想根據另一個元素的狀態更改樣式怎麽辦？這就是對等和組實用程式類派上用場的地方。

基於父狀態的樣式

例如，當父元素懸停時，可以透過將父元素轉變為組並使用 group 和 group-hover: 實用程式類來更改子元素的樣式：

<div class="group"> <div class="bg-gray-200">父元素</div> <p class="hidden group-hover:block">子元素</p> </div>

CSS:

.group:hover .group-hover\:block{ /* 懸停時子元素的樣式 */ display: block; }

在上述程式碼中，父元素使用 group 類來標識自己為組，並且子元素使用了 hidden 類來初始隱藏。然後，透過使用 group-hover: 字首，將子元素的樣式設定為在父元素懸停時顯示（即 display: block ）。這樣就實作了基於父狀態改變子元素樣式的效果。

基於兄弟狀態的樣式

對等類修飾詞可用於根據同級元素的狀態來設定元素的樣式。可以使用 peer-{modifier} ，其中 {modifier} 可以是任何偽類修飾詞。

這是一個簡單的例子：HTML:

<div> <button class="peer-hover:bg-blue-500">按鈕</button> <button>另一個按鈕</button> </div>

CSS:

.peer-hover\:bg-blue-500:hover ~ button{ /* 滑鼠懸停時第二個按鈕的背景色改變 */ background-color: #6EE7B7; }

在上面的範例中，當滑鼠懸停在第一個按鈕上時，透過使用 peer-hover:bg-blue-500 類，在同級元素中選擇後續兄弟元素（即第二個按鈕），並將其背景色更改為藍色（即 background-color: #6EE7B7; ）。

重新命名

在使用 Tailwind CSS 的 group 和 peer 實用程式類時，您可以為組和同級元素分配唯一的名稱，以區分不同的組和同級元素。HTML:

<div class="group group-example"> <div class="bg-gray-200">父元素</div> <p class="hidden group-example:hover:block">子元素</p> </div>

CSS:

.group-example:hover .group-example:hover\:block{ /* 懸停時子元素的樣式 */ display: block; }

在上述程式碼中，在 group 類和同級元素的實用程式類後面添加了 /example ，將其分配為唯一名稱。這樣可以確保這些類只會套用於特定的組和同級元素之間，而不會與其他地方使用相同的類產生沖突。

Summer

動畫實用類

Tailwind 有一些非常有用且易於使用的動畫實用程式類。例如，可以添加過渡顏色類並設定 300 毫秒的持續時間，以在懸停時建立平滑的顏色變化效果。還可以傳遞動畫曲線和動畫延遲：

<div class="... hover:bg-gray-300 transition-colors duration-300 ease-in-out"/>

幾乎所有可設定動畫的內容都可供開發者使用。除此之外，還有一些預制軔畫可用，例如： animate-spin 、 animate-ping 、 animate-bounce 和 animate-pulse 。

Summer

響應式設計

Tailwind 是一個移動優先框架，這意味著無字首的實用程式對所有螢幕尺寸都有效，而帶字首的實用程式會覆蓋特定斷點及以上斷點處的樣式。這有助於首先編寫 CSS 行動裝置，因為需要從小螢幕到大螢幕進行定義。

假設想要一個影像或視訊網格，希望設計在行動裝置上為一列，然後在較大的螢幕上為 2 列，在桌面上為 3 列，如下所示：

# ON

這樣寫：

<div class="grid grid-cols-1 gap-10 p-5 sm:grid-cols-2 md:grid-cols-3"> <div class="w-full aspect-video bg-cyan-500"></div> <div class="w-full aspect-video bg-cyan-500"></div> <div class="w-full aspect-video bg-cyan-500"></div> <div class="w-full aspect-video bg-cyan-500"></div> <div class="w-full aspect-video bg-cyan-500"></div> <div class="w-full aspect-video bg-cyan-500"></div> </div>

自訂最小和最大實用程式類也可用於更動態的用例。此外，可以將自訂斷點添加到 tailwind.config.js 配置檔中。

Summer

編輯器擴充套件

適用於 IDE 的 Tailwind CSS Intellisense 擴充套件 [1] 是 Tailwind 如此易用的主要原因之一。它會自動完成類名稱，顯示正在使用的顏色，並在將滑鼠懸停在類上時解釋該類的詳細資訊。

# ON

除此之外，還可以使用 Tailwind Prettier 外掛程式 [2] 讓 Prettier 對類進行排序。

Summer

建立自訂實用程式類

可以使用 Tailwind 配置檔來建立自訂實用程式類。如果想在套用的多個位置使用特定樣式，這非常有用。因此，如果想添加另一個盒子陰影類，那麽就需要這樣做：

// tailwind.config.js module.exports ={ content: ['./src/**/*.{html,js}'], theme:{ extend:{ boxShadow:{ neon:"0 0 5px theme('colors.purple.200'), 0 0 20px theme('colors.purple.700')" } } }, }

然後可以在程式碼中這樣來使用它：

<div class="w-20 h-10 rounded shadow-neon"></div>

Summer

建立自訂 Tailwind 外掛程式

如果希望能夠透過傳遞顏色來選擇自訂實用程式的顏色，需要制作自訂 Tailwind 外掛程式，它允許我們建立非常靈活且可重用的實用程式。

下面來重用霓虹燈陰影範例。要添加該功能，可以在 tailwind.config.js 中定義外掛程式：

// tailwind.config.js const plugin =require('tailwindcss/plugin'); module.exports ={ content:['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme:{// ... our previous config }, plugins:[ // 獲取顏色可以使用"theme"內容 plugin(({ theme, addUtilities })=>{ const neonUtilities ={}; const colors =theme('colors'); // 遍歷顏色 for(const color in colors){ // 檢查顏色是否為物件，因為Tailwind中的一些顏色是物件而另一些是字串 if(typeof colors[color]==='object'){ // 選擇使用兩種顏色 const color1 = colors[color]['500']; const color2 = colors[color]['700']; // 在這裏構建實際的類名 neonUtilities[`.neon-${color}`]={ boxShadow:`0 0 5px ${color1}, 0 0 20px ${color2}`, }; } } // 這將把實用程式類添加到Tailwind中 addUtilities(neonUtilities); }), ], };

然後可以直接在 HTML（或 JSX）中使用新建立的實用程式類：

<div class="m-20 w-20 h-10 rounded-lg neon-blue"></div>

可以在 Tailwind 調色盤中更改為想要的任何顏色：

# ON

Summer

將 Tailwind 顏色匯入為物件

可以將 Tailwind 顏色作為 JavaScript 中的物件匯入。如果想要使用 Tailwind 顏色來建立自訂主題，或者向調色盤添加另一個名稱，這將非常有用。

例如，可以建立一個將作為類添加的原色：

// 從 Tailwind 匯入所有顏色 const colors =require('tailwindcss/colors'); module.exports ={ content:['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme:{ extend:{ colors:{ // 將「primary」類名稱設定為所需的顏色+設定預設值。 primary:{...colors.sky, DEFAULT: colors.sky['600']}, }, }, }, plugins:[], };

Summer

簡單的漸變

可以使用漸變色標建立復雜的漸變。為此，可以使用 bg-gradient-to- class 並將其與 t（上）、r（右）、b（下）和 l（左）組合。還可以用 tr（右上角）、bl（左下角）等來表示角點。然後可以組合： from 、 to 和 via 來制作一些漸變。

下面來看一些例子：

{/* 第一個「to」👇🏽 指定方向 */} <div class="bg-gradient-to-r from-indigo-500 ..."> {/* 「from-」設定從哪種顏色開始然後淡出 */}

渲染的輸出將是一個以靛藍開始並逐漸漸變為透明的漸變：

# ON

可以使用 to- 來設定結束：

<div class="bg-gradient-to-r from-indigo-500 to-pink-400...">

這將渲染一個以靛藍開始並逐漸淡化為粉紅色的漸變：

# ON

可以透過使用 via 來控制中間的顏色：

<div class="bg-gradient-to-r from-indigo-500 via-green-400 to-pink-400...">

這將呈現幾乎彩虹的漸變，如下所示：

# ON

Summer

輕松截斷文本

另一個實用程式類是 line-clamp ，它允許透過簡單地添加數位（例如 line-clamp-3 ）來截斷多行文本：

<article class="mt-20 border border-slate-300 rounded-md p-4 ml-6 text-white w-60"> <p class="line-clamp-3"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> </article>

渲染結果將在 3 行文本後放一個省略號：

# ON

Summer

容器查詢

容器查詢允許根據元素本身的大小套用樣式。現在，Tailwind 中有一個名為 @tailwindcss/container-queries 的外掛程式可以開始使用容器查詢。將此外掛程式添加到計畫後，可以使用 @container 標記元素，並且子元素可以使用 @sm 和 @md 等變體：

<div class="@container"> <div class="@lg:text-sky-400">  </div> </div>

Tailwind CSS 元件庫

Summer IS HERE

最後來看幾個 Tailwind CSS UI 元件庫。

Summer

Tailwind UI

Tailwind UI 是一個由 Tailwind CSS 團隊建立的可重用 UI 元件和樣版集合。它提供了一系列精美設計和預構建的元件，可以幫助開發人員更快速地構建現代化和高度客製化的使用者介面。它的設計風格簡潔、現代，適用於各種 Web 應用程式和網站。它提供了各種常見的 UI 元件，如按鈕、表單、導航欄、卡片等，每個元件都經過精心設計和開發，以確保外觀一致性和互動性。除了單獨的元件之外，Tailwind UI 還提供了一些完整的頁面樣版，包括登入頁面、儀表盤、部落格布局等，可以直接作為計畫的基礎或參考使用。Tailwind UI 總共有超過 500 個元件，文件包含 React、Vue 和原始 HTML 的元件程式碼。

# ON

官網： https://tailwindui.com/

Summer

daisyUI

daisyUI 是一個開源的 Tailwind CSS 外掛程式，它提供了一套額外的實用工具類和元件，以擴充套件和增強 Tailwind CSS 的功能。它的目標是簡化構建使用者介面的過程，提供更多可選的樣式和元件，同時保持 Tailwind CSS 的哲學和設計原則。它透過引入新的類名來擴充套件 Tailwind CSS，這些類名可以直接套用於 HTML 元素，從而快速設定特定的樣式和功能。

# ON

官網： https://daisyui.com/

Summer

Tailwind Elements

Tailwind Elements 是一個由開發者社群建立的免費和開源計畫，它為 Tailwind CSS 提供了一套額外的可重用 UI 元件。它的目標是為開發人員提供一組常見且易於使用的 UI 元件，以幫助他們更快速地構建使用者介面。這些元件包括按鈕、表單元素、導航欄、卡片、提示框等，每個元件都經過設計和開發，並與 Tailwind CSS 的哲學相匹配。

# ON

官網： https://tailwind-elements.com/

Summer

Flowbite

Flowbite 是一個基於 Tailwind CSS 的前端 UI 框架和元件庫。它提供了一套現代、響應式和易於使用的UI元件，可以幫助開發人員快速構建出色的使用者介面。它的設計目標是簡化開發過程，並提供一致性和靈活性。它內建了一系列的高品質元件，包括導航選單、卡片、表格、表單元素、按鈕等，同時還有一些布局和實用工具類，方便開發人員進行快速開發和客製。Flowbite 有超過450 個元件，文件包含 HTML 元件程式碼，以及作為最流行框架的庫安裝的選項。Tailwind Elements 擁有500 多個元件（涵蓋所有類別），文件包含 HTML 元件程式碼，可以選擇將其安裝為庫。

# ON

官網： https://flowbite.com/

Summer

Tailwind UI Kit

Tailwind UI Kit 是一個基於 Tailwind CSS 的 UI 元件庫，提供了一套現成的、可重用的使用者介面元件，方便開發人員快速構建漂亮的網頁。它包含各種常見的界面元素和元件，例如導航欄、卡片、表單、按鈕、模態框等等。每個元件都經過精心設計和開發，並符合現代的 UI 設計準則。Tailwind UI Kit 擁有超過 1300 個元件，文件包含 HTML、Vue、Angular 和 React 的元件程式碼。

# ON