Tailwind CSS 為什么這么火？
近年來，Tailwind CSS 在前端開發(fā)領域備受關注，在GitHub上收獲了70000+ Star。盡管市面上有眾多的 CSS 框架可供選擇，但 Tailwind CSS 憑借其獨特的概念、強大的特性和靈活性越來越受到開發(fā)者的喜愛。那么，為何 Tailwind CSS 如此受歡迎呢？本文將深入探討這個問題，并介紹 Tailwind CSS 的概念、特性、技巧和組件庫，以更好地理解和使用它！
1.Tailwind CSS 概念
原子 CSS
在學習 Tailwind CSS 之前，先來了解一下什么是原子 CSS。
原子 CSS（Atomic CSS）是一種 CSS 架構方法，旨在通過使用單一的、獨立的類來構建樣式，從而提供可重用且高度可組合的樣式規(guī)則。
例如，使用以下 CSS 創(chuàng)建一個 bg-blue 類：
.bg-blue {
background-color: rgb(81, 191, 255);
}如果將此類添加到<h1>標簽中，它將獲得藍色背景，顏色如上面代碼rgb(81, 191, 255)所示。
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!</h1></div>
</body>
</html>效果如下：
我們可以編寫這種單一用途的 CSS 規(guī)則并將它們?nèi)勘４嬖谌?CSS 文件中。這樣就可以在任何地方使用這些單一用途的實用程序類。只需要在 HTML 中來使用這些全局 CSS 文件即可，還可以在單個 HTML 標簽中使用這些類的組合。
來看另一個例子，有以下規(guī)則的 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>效果如下：
圖片
可以看到：
- 組合多個實用程序類：第 14 行中組合了多個類，即bg-green、font-weight-400和text-underline。這些樣式在 Hello world 3 文本中都生效了。
- 實用程序類的可重用性：第 12 行和第 14 行中多次使用了 text-underline 類。
當然，如果想遵循這種原子 CSS 架構，就需要創(chuàng)建多個單一用途的實用程序類。這就是 Tailwind CSS 的用武之地。原子 CSS 的概念并不新鮮，但 Tailwind CSS 將其提升到了另一個水平。
Tailwind CSS 是什么？
Tailwind CSS 是一個實用優(yōu)先的 CSS 框架，旨在使用戶能夠更快、更輕松地創(chuàng)建應用?？梢允褂脤嵱贸绦蝾悂砜刂撇季?、顏色、間距、排版、陰影等，以創(chuàng)建完全自定義的組件設計，Tailwind CSS 在 Github 上有 70.6k Star，并且 npm 周安裝量達到了 636w+。
一開始對 Tailwind CSS 的印象并不太好，而更喜歡干凈的 HTML 干凈以及語義化的類名，后者在前端關注點分離中發(fā)揮著重要作用。使用 Tailwind 和這么多的類很奇怪，讓我想起了內(nèi)聯(lián)樣式。不過，隨著時代的變化，HTML、CSS 和 JavaScript 之間的聯(lián)系也在變化。這開啟了改變類在項目中的角色的可能性，并且實用程序優(yōu)先的方法非常適合現(xiàn)代的、基于 JavaScript 的時代。
Tailwind 是一個 CSS 框架，但它并不是新的 Bootstrap。Bootstrap 等傳統(tǒng) CSS 框架為用戶提供了許多預定義的功能，如組件和布局系統(tǒng)。而 Tailwind 并非如此，因為它不附帶預定義組件。兩者的目標都是讓開發(fā)更輕松，但實現(xiàn)方式有所不同：傳統(tǒng)框架試圖避免CSS 及其復雜性，而 Tailwind CSS 希望改變編寫 CSS 的方式。因此，與其他 CSS 框架相比，它提供了更大的靈活性和控制力。
Tailwind CSS 有很多優(yōu)勢：
- 編寫的自定義 CSS 更少：使用 Tailwind，可以通過直接在HTML中應用預先存在的類來設置元素的樣式。通過以這種方式使用實用程序類，可以構建自定義設計而無需編寫 CSS。
- 可以保持 CSS 文件較小：如果沒有像 Tailwind 這樣的框架，就必須在添加新功能和組件時繼續(xù)編寫 CSS。這樣 CSS 文件不斷增長并變得越來越大。通過使用 Tailwind 的等實用程序，大多數(shù)樣式都是可重用的，因此很少需要編寫新的 CSS。
- 不必定義類名：使用 Tailwind 時，可以從預定義的設計系統(tǒng)中選擇類。這意味著無需為某些樣式和組件選擇“完美”的類名而煩惱，也無需記住像 sidebar-inner-wrapper 這樣復雜的類名。
- 可以做出更安全的更改：使用傳統(tǒng)方法，如果對 CSS 進行更改，則可能會破壞網(wǎng)站上的某些內(nèi)容。不同于 CSS，在HTML中使用的實用類是局部的。這意味著可以更改它們而不必擔心影響站點上其他部分的功能。
Tailwind CSS 核心理念
學習如何使用 Tailwind CSS 最重要的部分實際上是使用它的類，理解實用程序優(yōu)先的方法。
假設想要設計一個簡單的按鈕樣式：
<button class="btn"> 按鈕 </button>傳統(tǒng)的方法如下所示：
.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 即可重新創(chuàng)建此按鈕，而是使用一堆低級實用程序類：
<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>可以看到，這里使用了很多類來為之前相同的按鈕樣式設置樣式，但每個類只管理一個或幾個經(jīng)常一起使用的CSS屬性。這些類的命名描述了它們的功能：inline-block將CSS的display屬性設置為display: inline-block;，bg-transparent將background-color屬性設置為background-color: transparent;，而cursor-pointer則將cursor屬性設置為cursor: pointer;。
有些類看起來不太直觀，比如py-2用于管理垂直內(nèi)邊距，而px-6用于管理水平內(nèi)邊距。還有一些類同時設置多個屬性，比如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;
}盡管有些類不太容易理解，但基本概念始終是相同的。除了基礎知識、自定義和插件外，官方文檔的所有章節(jié)都致力于解釋Tailwind生成的類的名稱和默認值，幾乎涵蓋了每個常用的CSS屬性，甚至一些不太常見的屬性。
2.Tailwind CSS 特性
響應式設計
Tailwind CSS默認支持響應式設計，這意味著它生成的每個類都有對應的變體，只在特定的媒體查詢匹配時才應用。默認情況下，Tailwind是以移動設備優(yōu)先的方式進行設計的：它的所有媒體查詢都是基于min-width的類型。每個類都會根據(jù)每個斷點生成一個對應的變體，例如，可以使用sm斷點來表示640px。因此，如果想要在屏幕寬度達到640px及以上時應用text-white類，可以寫作sm:text-white。還可以結合響應式和狀態(tài)變體，例如使用sm:hover:text-white表示在屏幕寬度達到640px及以上且處于 hover 狀態(tài)時應用text-white類。
函數(shù)和指令
通過使用指令和函數(shù)，可以更靈活地定制和擴展你的CSS樣式，并結合Tailwind的強大功能實現(xiàn)更高效的開發(fā)。
指令
Tailwind 指令是用于執(zhí)行各種操作的特殊聲明，比如使用@variants指令生成一些類的變體，或者使用帶有 @screen 指令的 Tailwind 媒體查詢。對于@apply指令需要特別注意，這個指令允許在自定義樣式中使用 Tailwind的 實用類：
.custom-button {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}這里使用@apply指令將Tailwind的實用類應用到.custom-button類上，以快速設置背景顏色、文字顏色、字體加粗、內(nèi)邊距和圓角等樣式。
函數(shù)
Tailwind還提供了一些函數(shù)，用于在CSS中動態(tài)生成樣式。例如，可以使用theme函數(shù)來獲取配置文件中的顏色值：
.btn-primary {
background-color: theme('colors.blue.500');
}這里使用theme函數(shù)來獲取配置文件中blue.500定義的顏色，并將其作為背景顏色應用到.btn-primary類。
定制化
默認的 Tailwind CSS 設置非常適合非常通用的用例，但如果項目需要，也可以根據(jù)需要調(diào)整和自定義實用程序類。Tailwind 項目中通常有兩個配置文件：框架內(nèi)部使用的一個，以及可以在項目根目錄下創(chuàng)建的 tailwind.config.js 文件。每次構建項目時，在生成所有實用程序類之前，Tailwind 都會查找自定義配置文件，找到后它會嘗試將其與內(nèi)部配置合并，作為未指定的參數(shù)的后備。因此，自定義配置文件可以指定僅生成幾個類的設置，但如果沒有指定任何相關內(nèi)容，則所有 Tailwind 默認類都將繼續(xù)工作。
文件結構
每個 Tailwind CSS 配置文件至少有以下參數(shù)：
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 參數(shù)為類啟用暗模式變體，插件允許使用更多功能和實用程序類（例如 Tailwind Typography）來擴展 Tailwind，這對于 Markdown 生成的內(nèi)容樣式非常有用。還有更多設置，官方文檔有詳細描述，但最重要的是theme、variants 和 purge。
theme
在 theme 中能夠自定義調(diào)色板、響應能力和容器設置、間距實用程序甚至占位符不透明度實用程序。最常見的更改實用程序是斷點、調(diào)色板和間距。
自定義斷點
項目的斷點在screens對象中進行管理：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
},
}默認情況下，Tailwind 不僅生成實用程序的普通版本，例如 text-white，而且還為screens對象內(nèi)指定的每個斷點生成響應變體：sm:text-white、md:text-white、xl:text-white。這里可以包含更多或更少的斷點，并且screens對象支持各種程度的自定義，例如，使用桌面優(yōu)先最大寬度媒體查詢，或使用最小和最大寬度的范圍媒體查詢。
自定義調(diào)色板
調(diào)色板在顏色colors內(nèi)部進行管理：
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
teal: {
50: '#f0fdfa',
100: '#ccfbf1',
200: '#99f6e4',
},
emerald: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
},
},
},
}當提供字符串參數(shù)時，Tailwind 將為該顏色生成所有與顏色相關的實用程序，例如 bg-transparent、border-transparent 等。當提供對象時，實用程序?qū)⑾?nbsp;bg-teal-50、text-emerald-200 中那樣“嵌套”。還可以在對象內(nèi)提供特殊的 DEFAULT 值，Tailwind 將生成該顏色的“非嵌套”版本：
module.exports = {
theme: {
colors: {
emerald: {
DEFAULT: '#059669', // Generates bg-emerald, text-emerald, border-emerald...
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
},
},
},
}這樣的嵌套邏輯適用于 Tailwind 支持的幾乎所有實用程序。注意，一切都是基于對象的：這就是為什么在使用 theme() 函數(shù)從自定義 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 */
}),
},
}它的使用非常簡單，只需根據(jù)需要修改鍵/值對，所有與間距相關的實用程序（例如 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 */
},
},
}覆蓋或擴展
自定義主題時，可以為自定義的每個實用程序擴展或覆蓋 Tailwind 的默認值。默認情況下，當在theme對象內(nèi)設置實用程序時，將覆蓋默認值。以過渡持續(xù)時間為例。在默認配置文件中，其值為：
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的過渡持續(xù)時間。如果在自定義 tailwind.config.js 文件中聲明：
module.exports = {
theme: {
transitionDuration: {
2000: '2000ms',
},
},
}Tailwind會生成一個名為duration-2000的類，將過渡時長設置為2000毫秒。但是，將失去其他類，如duration-300或用于過渡時長為150毫秒的默認類。實際上，這種方法可能更好，因為這樣 Tailwind CSS 只會生成實際使用的類，這在開發(fā)模式下可以提高性能。
如果在上面的示例中，默認值已經(jīng)滿足需求，可以進行擴展。想擴展的每個工具都必須放在特殊的extend對象內(nèi)。下面通過擴展默認工具來添加一個2000毫秒的過渡時長，而不是替換它們：
module.exports = {
theme: {
extend: {
transitionDuration: {
2000: '2000ms',
},
}
},
}這樣就可以使用duration-2000類，而不會丟失duration-300和所有其他默認實用程序。
變體
可以為每個實用程序生成許多變體：hover、visited、focus、checked、active、odd、even等，為每個工具生成所有可能的變體會導致生成成千上萬個無用的類，構建過程緩慢，開發(fā)模式下生成巨大的CSS文件，并且需要清理許多無用的樣式以進行生產(chǎn)。因此，默認情況下，只有響應式變體是始終啟用的，而其他所有變體只有在你期望找到它們的地方才會被默認激活（例如，backgroundColor工具的hover變體）。
變體對象中的每個屬性都必須有一個實用程序名稱作為鍵，并以一組啟用的變體作為值：
module.exports = {
variants: {
accessibility: ['responsive', 'focus-within', 'focus'],
alignContent: ['responsive'],
alignItems: ['responsive'],
},
}與 theme 一樣，在自定義變體時，可以覆蓋或擴展實用程序的設置：
module.exports = {
variants: {
// 除了默認值之外，還將生成“active”變體
extend: {
backgroundColor: ['active']
}
},
}指定變體的順序很重要。變體是由數(shù)組定義的，它們在數(shù)組中的順序決定了相對類在最終樣式表中的位置。這很重要，因為一個元素可以同時處于活動和焦點狀態(tài)下：優(yōu)先使用的類別不是由在HTML元素中輸入它們的順序決定的，而是由這些類在最終CSS中的順序決定的。
清除
默認情況下，Tailwind 生成如此多的類，最終未壓縮的 CSS 大小達到 3739.4 kB，這是巨大的?？梢宰屑氝x擇要啟用或禁用的實用程序，禁用所有未使用的變體和不太常見的斷點，但最終仍然需要清除所有未使用的類和變體。
Tailwind CSS 使用 PurgeCSS 來對未使用的樣式進行 tree-shake 并獲得更小的最終 CSS。默認情況下，PurgeCSS 僅在生產(chǎn)模式下運行。
配置文件公開了可以根據(jù)需要自定義的清除參數(shù)。首先，可以使用 Tailwind CSS 實用程序提供每個文件的簡單路徑數(shù)組，以便 PurgeCSS 可以檢測要保留哪些類以及要刪除哪些類：
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
theme: {},
variants: {},
plugins: [],
}重要的是要包含按名稱引用 Tailwind 實用程序之一的每個可能文件，例如動態(tài)切換某些類的 JavaScript 文件；如果不這樣做，PurgeCSS 將看不到這些類在其他地方使用，并且如果不在其他地方使用，則會將其刪除。
3.Tailwind CSS 技巧
這一部分來探討一些可以顯著增強開發(fā)體驗的 Tailwind 技巧。
動態(tài)實用程序類
Tailwind 會清除未使用的類，這就是為什么它能夠擁有如此多的功能，同時仍然保持我 CSS 包尺寸較小。因此，如果想使用動態(tài)類名，則需要將所有想要的類名寫入代碼中的某個位置。這是為了讓 Tailwind 能夠靜態(tài)分析代碼。
例如，這樣是行不通的：
const DoesntWork = () => {
const colors = ['red', 'green', 'yellow'];
const [color, setColor] = React.useState(colors[0]);
const changeColor = () => {
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 無法靜態(tài)地找到它的類。bg-${color}-500 需要在運行時進行評估。但是，如果確實使用完整的類名，Tailwind 編譯器可以使其工作：
const Works = () => {
const colors = ['bg-red-500', 'bg-green-500', 'bg-yellow-500'];
const [color, setColor] = React.useState(colors[0]);
const changeColor = () => {
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>
</>
);
};在 CSS 中使用 Tailwind
有時需要使用 CSS 來設計樣式，例如，當使用第三方庫時。這時就可以通過使用 @apply 指令或 theme 函數(shù)來使用 Tailwind 顏色，下面來看一個例子：
.__some-external-class {
/* 通過 @apply 可以使用 Tailwind 中的任何實用程序類名稱 */
@apply text-blue-300 bg-gray-300 py-2 px-6 rounded-lg uppercase;
/* 或使用 theme() 函數(shù) */
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;
}任意值
在 Tailwind 中編寫純 CSS 的另一種方法是使用方括號 ([])。這就是所謂的“任意值”?？梢赃@樣做：
<div class="w-[100vw] bg-[rebbecapurple]"></div>更重要的是，還可以使用 theme 函數(shù)：
<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>group 和 peer實用程序類
Tailwind 允許使用幫助類（如:hover、:checked、:disabled、:focus等）根據(jù)元素的狀態(tài)來更改其樣式。因此，可以輕松實現(xiàn)以下效果：
<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>結果如下：
如果想根據(jù)另一個元素的狀態(tài)更改樣式怎么辦？這就是對等和組實用程序類派上用場的地方。
基于父狀態(tài)的樣式
例如，當父元素懸停時，可以通過將父元素轉變?yōu)榻M并使用 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）。這樣就實現(xiàn)了基于父狀態(tài)改變子元素樣式的效果。
基于兄弟狀態(tài)的樣式
對等類修飾符可用于根據(jù)同級元素的狀態(tài)來設置元素的樣式。可以使用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 類，在同級元素中選擇后續(xù)兄弟元素（即第二個按鈕），并將其背景色更改為藍色（即 background-color: #6EE7B7;）。
重命名
在使用 Tailwind CSS 的 group 和 peer 實用程序類時，您可以為組和同級元素分配唯一的名稱，以區(qū)分不同的組和同級元素。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，將其分配為唯一名稱。這樣可以確保這些類只會應用于特定的組和同級元素之間，而不會與其他地方使用相同的類產(chǎn)生沖突。
動畫實用類
Tailwind 有一些非常有用且易于使用的動畫實用程序類。例如，可以添加過渡顏色類并設置 300 毫秒的持續(xù)時間，以在懸停時創(chuàng)建平滑的顏色變化效果。還可以傳遞動畫曲線和動畫延遲：
<div class="... hover:bg-gray-300 transition-colors duration-300 ease-in-out" />幾乎所有可設置動畫的屬性都可供開發(fā)者使用。除此之外，還有一些預制動畫可用，例如：animate-spin、animate-ping、animate-bounce 和 animate-pulse。
響應式設計
Tailwind 是一個移動優(yōu)先框架，這意味著無前綴的實用程序?qū)λ衅聊怀叽缍加行?，而帶前綴的實用程序會覆蓋特定斷點及以上斷點處的樣式。這有助于首先編寫 CSS 移動設備，因為需要從小屏幕到大屏幕進行定義。
假設想要一個圖像或視頻網(wǎng)格，希望設計在移動設備上為一列，然后在較大的屏幕上為 2 列，在桌面上為 3 列，如下所示：
這樣寫：
<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>自定義最小和最大實用程序類也可用于更動態(tài)的用例。此外，可以將自定義斷點添加到 tailwind.config.js 配置文件中。
編輯器擴展
適用于 IDE 的 Tailwind CSS Intellisense 擴展[1]是 Tailwind 如此易用的主要原因之一。它會自動完成類名稱，顯示正在使用的顏色，并在將鼠標懸停在類上時解釋該類的詳細信息。
除此之外，還可以使用 Tailwind Prettier 插件[2]讓 Prettier 對類進行排序。
創(chuàng)建自定義實用程序類
可以使用 Tailwind 配置文件來創(chuàng)建自定義實用程序類。如果想在應用的多個位置使用特定樣式，這非常有用。因此，如果想添加另一個盒子陰影類，那么就需要這樣做：
// 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>創(chuàng)建自定義 Tailwind 插件
如果希望能夠通過傳遞顏色來選擇自定義實用程序的顏色，需要制作自定義 Tailwind 插件，它允許我們創(chuàng)建非常靈活且可重用的實用程序。
下面來重用霓虹燈陰影示例。要添加該功能，可以在 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）中使用新創(chuàng)建的實用程序類：
<div class="m-20 w-20 h-10 rounded-lg neon-blue"></div>可以在 Tailwind 調(diào)色板中更改為想要的任何顏色：
將 Tailwind 顏色導入為對象
可以將 Tailwind 顏色作為 JavaScript 中的對象導入。如果想要使用 Tailwind 顏色來創(chuàng)建自定義主題，或者向調(diào)色板添加另一個名稱，這將非常有用。
例如，可以創(chuàng)建一個將作為類添加的原色：
// 從 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: [],
};簡單的漸變
可以使用漸變色標創(chuàng)建復雜的漸變。為此，可以使用 bg-gradient-to-class 并將其與 t（上）、r（右）、b（下）和 l（左）組合。還可以用 tr（右上角）、bl（左下角）等來表示角點。然后可以組合：from、to 和via 來制作一些漸變。
下面來看一些例子：
{ /* 第一個“to”???? 指定方向 */}
<div class="bg-gradient-to-r from-indigo-500 ...">
{ /* “from-”設置從哪種顏色開始然后淡出 */}渲染的輸出將是一個以靛藍開始并逐漸漸變?yōu)橥该鞯臐u變：
可以使用 to- 來設置結束：
<div class="bg-gradient-to-r from-indigo-500 to-pink-400...">這將渲染一個以靛藍開始并逐漸淡化為粉紅色的漸變：
可以通過使用 via 來控制中間的顏色：
<div class="bg-gradient-to-r from-indigo-500 via-green-400 to-pink-400...">這將呈現(xiàn)幾乎彩虹的漸變，如下所示：
輕松截斷文本
另一個實用程序類是 line-clamp，它允許通過簡單地添加數(shù)字（例如 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 行文本后放一個省略號：
容器查詢
容器查詢允許根據(jù)元素本身的大小應用樣式?，F(xiàn)在，Tailwind 中有一個名為 @tailwindcss/container-queries 的插件可以開始使用容器查詢。將此插件添加到項目后，可以使用 @container 標記元素，并且子元素可以使用 @sm 和 @md 等變體：
<div class="@container">
<div class="@lg:text-sky-400">
<!-- ... -->
</div>
</div>4.Tailwind CSS 組件庫
最后來看幾個 Tailwind CSS UI 組件庫。
Tailwind UI
Tailwind UI 是一個由 Tailwind CSS 團隊創(chuàng)建的可重用 UI 組件和模板集合。它提供了一系列精美設計和預構建的組件，可以幫助開發(fā)人員更快速地構建現(xiàn)代化和高度定制化的用戶界面。它的設計風格簡潔、現(xiàn)代，適用于各種 Web 應用程序和網(wǎng)站。它提供了各種常見的 UI 組件，如按鈕、表單、導航欄、卡片等，每個組件都經(jīng)過精心設計和開發(fā)，以確保外觀一致性和交互性。除了單獨的組件之外，Tailwind UI 還提供了一些完整的頁面模板，包括登錄頁面、儀表盤、博客布局等，可以直接作為項目的基礎或參考使用。Tailwind UI 總共有超過 500 個組件，文檔包含 React、Vue 和原始 HTML 的組件代碼。
官網(wǎng)：https://tailwindui.com/。
daisyUI
daisyUI 是一個開源的 Tailwind CSS 插件，它提供了一套額外的實用工具類和組件，以擴展和增強 Tailwind CSS 的功能。它的目標是簡化構建用戶界面的過程，提供更多可選的樣式和組件，同時保持 Tailwind CSS 的哲學和設計原則。它通過引入新的類名來擴展 Tailwind CSS，這些類名可以直接應用于 HTML 元素，從而快速設置特定的樣式和功能。
官網(wǎng)：https://daisyui.com/。
Tailwind Elements
Tailwind Elements 是一個由開發(fā)者社區(qū)創(chuàng)建的免費和開源項目，它為 Tailwind CSS 提供了一套額外的可重用 UI 組件。它的目標是為開發(fā)人員提供一組常見且易于使用的 UI 組件，以幫助他們更快速地構建用戶界面。這些組件包括按鈕、表單元素、導航欄、卡片、提示框等，每個組件都經(jīng)過設計和開發(fā)，并與 Tailwind CSS 的哲學相匹配。
圖片
官網(wǎng)：https://tailwind-elements.com/。
Flowbite
Flowbite 是一個基于 Tailwind CSS 的前端 UI 框架和組件庫。它提供了一套現(xiàn)代、響應式和易于使用的UI組件，可以幫助開發(fā)人員快速構建出色的用戶界面。它的設計目標是簡化開發(fā)過程，并提供一致性和靈活性。它內(nèi)置了一系列的高質(zhì)量組件，包括導航菜單、卡片、表格、表單元素、按鈕等，同時還有一些布局和實用工具類，方便開發(fā)人員進行快速開發(fā)和定制。Flowbite 有超過450 個組件，文檔包含 HTML 組件代碼，以及作為最流行框架的庫安裝的選項。Tailwind Elements 擁有500 多個組件（涵蓋所有類別），文檔包含 HTML 組件代碼，可以選擇將其安裝為庫。
官網(wǎng)：https://flowbite.com/。
Tailwind UI Kit
Tailwind UI Kit 是一個基于 Tailwind CSS 的 UI 組件庫，提供了一套現(xiàn)成的、可重用的用戶界面組件，方便開發(fā)人員快速構建漂亮的網(wǎng)頁。它包含各種常見的界面元素和組件，例如導航欄、卡片、表單、按鈕、模態(tài)框等等。每個組件都經(jīng)過精心設計和開發(fā)，并符合現(xiàn)代的 UI 設計準則。Tailwind UI Kit 擁有超過 1300 個組件，文檔包含 HTML、Vue、Angular 和 React 的組件代碼。
官網(wǎng)：https://tailwinduikit.com/。
Hyper UI
Hyper UI 是一個適用于應用程序 UI、電子商務和營銷的免費 Tailwind CSS 組件，支持暗模式、RTL 和 Alpine JS等，旨在為開發(fā)人員提供現(xiàn)代化的、可定制的用戶界面組件。
官網(wǎng)：https://www.hyperui.dev/。
[1]Tailwind CSS Intellisense 擴展： https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss。
[2]Tailwind Prettier插件： https://github.com/tailwindlabs/prettier-plugin-tailwindcss。
