咩係 Tailwind CSS
Tailwind CSS 係一個功能優先嘅 CSS 框架，佢透過提供大量可以組合嘅實用類（Utility Classes）嚟幫開發者快速構建自訂用戶界面。同 Bootstrap 呢類提供預設組件（例如按鈕、卡片）嘅框架唔同，Tailwind CSS 唔會提供任何有固定樣式嘅組件。相反，佢提供好似 <code>flex</code>、<code>pt-4</code>、<code>text-center</code> 同埋 <code>rotate-90</code> 咁樣嘅底層原子類，開發者可以直接喺 HTML 度組合呢啲類嚟構建任何設計。
佢嘅核心設計哲學係「約束下嘅自由」。框架本身定義咗一套精心設計嘅設計系統，包括間距、顏色、字體大小、斷點等等，開發者喺呢個系統入面工作，可以確保設計嘅一致性，同時又能夠得到幾乎無限嘅自訂能力。呢種方法明顯減少咗喺純 CSS 檔案同 HTML 結構之間來回切換嘅認知負擔，令開發流程更加高效，特別係喺原型設計同響應式開發方面。
核心概念同基本用法
要高效噉用 Tailwind CSS，一定要理解佢幾個核心概念。呢啲概念構成咗用呢個框架做樣式設計嘅基礎。
推薦閱讀 係乜嘢令 Tailwind CSS 成為現代前端開發嘅首選框架。
實用類優先嘅工作流程
用 Tailwind CSS 嗰陣，你會直接喺 HTML 元素嘅 <code>class</code> 屬性度寫樣式。例如，要整一個有藍色背景、白色字、內邊距同圓角嘅按鈕，你唔使再特登去一個獨立嘅 CSS 檔案度開新類同改名，而係直接組合實用類：
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
点击我
</button>呢度，<code>bg-blue-500</code> 設定背景顏色，<code>text-white</code> 設置文字顏色，<code>font-bold</code> 設定字體粗細，<code>py-2</code> 同埋 <code>px-4</code> 分別設定垂直同水平方向嘅內邊距，<code>rounded</code> 加入預設圓角。呢種「實用類優先」嘅方法令樣式同結構緊密關聯，一目了然。
響應式設計同斷點
Tailwind CSS 內置咗移動優先嘅響應式設計系統。默認嘅斷點前綴好似 <code>sm:</code>、<code>md:</code>、<code>lg:</code>、<code>xl:</code>、<code>2xl:</code> 可以輕鬆噉針對唔同屏幕尺寸應用樣式。你只需要喺實用類前面加上相應嘅前綴就得。
例如，以下代碼表示喺移動設備上默認使用塊級顯示，喺中等屏幕（768px）同以上嘅時候變為彈性佈局：
<div class="block md:flex">
<!-- 子元素 -->
</div>狀態變體同偽類
框架通過前綴支援常見嘅狀態變體，好似懸停（<code>hover:</code>）、焦點（<code>focus:</code>）、啟動（<code>active:</code>）等。呢個令到為互動元素加狀態樣式變得非常簡單。
推薦閱讀 深入理解 Tailwind CSS：從實用工具到現代前端開發嘅核心實踐。
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
交互按钮
</button>喺項目度安裝同配置
將 Tailwind CSS 整合到你嘅項目主要有兩種方式：透過 CDN 快速原型開發，或者透過 PostCSS 進行正式項目構建。對於生產環境，強烈推薦使用構建流程。
用 PostCSS 進行安裝
呢個係最常用同功能最完整嘅方式。首先，用 npm 或者 yarn 初始化項目並安裝依賴：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init呢個指令會生成一個名為 <code>tailwind.config.js</code> 嘅設定檔。跟住，你需要喺項目嘅 CSS 入口檔案（例如 <code>src/styles.css</code>) 中引入 Tailwind 嘅指令：
@tailwind base;
@tailwind components;
@tailwind utilities;然後，設定 PostCSS 設定檔（例如 <code>postcss.config.js</code>）嚟處理呢啲指令：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}最後，喺構建過程入面，Tailwind CLI 或者打包工具（好似 Webpack、Vite 咁）會掃描你啲 HTML、JavaScript 等模板檔案，搵出用緊嘅類名，同埋生成最終優化過嘅 CSS 檔案。
配置檔案詳解
<code>tailwind.config.js</code> 係 Tailwind CSS 嘅核心。喺呢度，你可以完全自訂設計系統。例如，你可以擴展或者覆蓋默認嘅主題設定：
推薦閱讀 Tailwind CSS 實用指南：從入門到精通，構建現代化響應式網站。
module.exports = {
content: [‘./src/**/*.{html,js,ts,jsx,tsx}’], // 指定要扫描的文件
theme: {
extend: {
colors: {
‘brand-blue’: ‘#1d4ed8’,
},
spacing: {
‘128’: ‘32rem’,
}
},
},
plugins: [],
}透過配置 <code>content</code> 字段，Tailwind 可以執行「搖樹優化」，只將項目中實際使用到嘅類生成到最終嘅 CSS 中，咁樣可以極大噉減細檔案體積。
實戰技巧與最佳實踐
掌握基礎之後，一啲進階技巧可以令你喺實戰中如虎添翼，寫出更清晰、更易維護嘅代碼。
提取組件同使用 @apply
雖然「實用類優先」係核心理念，但當一組類喺項目中重複出現時（例如一個特定樣式嘅按鈕），喺 HTML 中反覆書寫會顯得冗長。呢個時候，可以使用 <code>@apply</code> 喺CSS度提取可以重用嘅組件類別。
喺自訂CSS檔案入面：
.btn-primary {
@apply bg-brand-blue text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300;
}然後喺HTML度用：
<button class=“btn-primary”>提交</button>請注意，過度使用 <code>@apply</code> 會回歸到編寫傳統 CSS 嘅模式，應該謹慎使用，只係用嚟提取真正重複嘅樣式模式。
處理動態類名
喺 React、Vue 等現代前端框架入面，成日需要條件性地加類名。可以用類庫例如 <code>clsx</code> 或 <code>classnames</code> 嚟優雅咁處理：
import clsx from ‘clsx’;
function Button({ isActive, children }) {
const buttonClasses = clsx(
‘px-4 py-2 rounded’,
{
‘bg-blue-500 text-white’: isActive,
‘bg-gray-200 text-gray-800’: !isActive,
}
);
return <button className={buttonClasses}>{children}</button>;
}自定義插件開發
如果項目中有好複雜、基於實用類嘅模式需要重用，可以考慮編寫 Tailwind 插件。插件可以註冊新嘅實用類、組件或者甚至係基礎樣式。
一個簡單嘅插件示例，用於添加一個清除浮動實用類：
// tailwind.config.js
const plugin = require(‘tailwindcss/plugin’);
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
const newUtilities = {
‘.clearfix::after’: {
content: ‘“”’,
display: ‘table’,
clear: ‘both’,
},
};
addUtilities(newUtilities, [‘responsive’]);
})
]
}摘要
Tailwind CSS 透過其獨特嘅實用類優先方法論，徹底改變咗開發者編寫 CSS 嘅方式。佢將樣式決策從樣式表移到咗模板中，大大提升咗開發速度、維護性同設計一致性。從理解其核心概念（例如響應式前綴、狀態變體）開始，到喺項目中正確安裝配置，再到運用提取組件、處理動態類等實戰技巧，開發者可以逐步掌握呢個強大工具。佢唔係適合所有場景，但對於追求快速迭代、高度定制化界面而且希望保持 CSS 體積輕量嘅項目嚟講，Tailwind CSS 無疑係一個極具價值嘅解決方案。
常見問題
Tailwind CSS 生成嘅 CSS 檔案會唔會好大？
唔會，如果正確配置。Tailwind CSS 使用 PurgeCSS（喺 v3.0 及以後版本中集成喺 <code>content</code> 喺配置裏面）掃描你嘅項目文件，然後只係將實際用到嘅 CSS 類包含喺最終嘅生產構建文件入面。呢個過程叫做「搖樹優化」，佢可以將冇用到嘅樣式全部移除，通常最終生成嘅 CSS 文件得幾 KB 到十幾 KB。
喺團隊項目入面，點樣確保用 Tailwind CSS 嘅設計一致性？
Tailwind CSS 透過 <code>tailwind.config.js</code> 配置文件強制定義咗一個設計系統（顏色、間距、字體大小、斷點等等）。團隊所有成員都基於同一套配置進行開發，咁本身就保證咗設計令牌（Design Tokens）嘅一致性。另外，其實用類命名高度規範化，避免咗傳統 CSS 入面因為類名定義主觀性導致嘅不一致問題。結合設計稿同配置文件嘅審查，可以好好咁維持一致性。
點樣覆蓋或者修改 Tailwind 默認嘅組件樣式？
由於 Tailwind 本身唔會提供具體組件，呢度講嘅「組件樣式」通常係指第三方庫或者自己用實用類砌出嚟嘅 UI 區塊。對於自己砌嘅部分，直接喺 HTML 度改類名就得。如果樣式已經抽咗出嚟 <code>@apply</code> 嘅 CSS 類入面，咁就改嗰個類嘅定義。
對於需要全局覆蓋 Tailwind 基礎樣式嘅情況（例如默認嘅標題樣式），你可以喺 <code>tailwind.config.js</code> 的 <code>theme.extend</code> 部分進行擴展，或者喺引入 <code>@tailwind base;</code> 之後，用純 CSS 進行覆蓋。推薦用擴展配置嘅方式，咁樣可以更加容易維護。
Tailwind CSS 適合同邊啲 JavaScript 框架一齊使用？
Tailwind CSS 同所有主流嘅 JavaScript 框架或者庫都可以完美整合，包括 React、Vue.js、Angular、Svelte、Next.js、Nuxt.js 等等。佢冇框架綁定嘅特性，令到佢只係作為一個樣式工具存在。框架嘅構建工具（例如 Vite、Webpack）可以好容易同 Tailwind 嘅 PostCSS 設定結合。好多框架甚至仲有官方嘅 Tailwind CSS 整合指南或者模板。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。