咩係 Tailwind CSS
Tailwind CSS 係一個功能優先嘅 CSS 框架，佢透過提供大量可組合嘅實用類（Utility Classes）嚟幫開發者快速構建自訂用戶介面。同 Bootstrap 呢類提供預設組件（例如按鈕、卡片）嘅框架唔同，Tailwind CSS 唔提供任何有固定樣式嘅組件，而係提供咗一系列細粒度嘅 CSS 類，每個類通常只對應一個 CSS 屬性。呢種「原子化 CSS」嘅理念令開發者能夠直接喺 HTML 中透過組合呢啲類嚟設計介面，從而獲得極高嘅靈活性同設計自由度，同時避免咗傳統 CSS 中可能出現嘅樣式衝突同特異性問題。
佢嘅核心工作流程係，開發者透過編寫包含呢啲實用類嘅 HTML 嚟構建介面，然後 Tailwind 嘅構建工具（基於 PostCSS）會掃描項目文件，搵出所有用到嘅類，並生成一個只包含呢啲類對應 CSS 規則嘅精簡樣式表。咁樣意味住最終生成嘅 CSS 檔案大小只同項目中實際使用嘅樣式相關，從而實現咗極佳嘅運行時性能。
核心概念同基礎用法
要高效使用 Tailwind CSS，首先需要理解佢嘅核心配置同基礎類名結構。
推薦閱讀 Tailwind CSS 入門指南：快速構建現代化響應式網頁。
實用類命名系統
Tailwind CSS 嘅實用類命名跟一套好直觀同一致嘅規則。大多數類名都直接對應返相應嘅 CSS 屬性，而且成日會包含一個表示屬性值嘅修飾符。例如，p-4 對應 padding: 1rem;，text-center 對應 text-align: center;，bg-blue-500 對應 background-color: #3b82f6;。顏色、間距、字型大小等等都有預先定義好、可以擴展嘅數值尺度。
一個典型嘅按鈕可能會由以下嘅類組合而成：
<button class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
点击我
</button>呢段代碼定義咗按鈕嘅內邊距、背景色、文字顏色、字型粗細、圓角，同埋滑鼠懸停同聚焦時嘅狀態樣式。
響應式設計同狀態變體
Tailwind CSS 內置咗強大嘅響應式設計系統。透過喺類名前加屏幕尺寸前綴（例如 md:, lg:），就可以輕鬆創建響應式佈局。
<div class="text-sm md:text-base lg:text-lg">
呢段文字會跟住唔同嘅屏幕尺寸而改變大細。
</div>另外，框架仲支援多種狀態變體前綴，好似 hover:, focus:, active:, disabled: 咁，用嚟定義元素喺唔同互動狀態下嘅樣式，大大簡化咗互動樣式嘅編寫。
推薦閱讀 Tailwind CSS 終極指南：從入門到精通，打造現代化響應式網頁。
配置文件 tailwind.config.js
項目嘅樣式行為主要透過 tailwind.config.js 檔案進行深度自訂。喺呢個設定檔案入面，你可以擴展或者完全覆蓋預設嘅主題設定，包括顏色、字體、間距比例、斷點等等。你亦都可以喺度註冊自訂嘅插件，嚟添加新嘅實用類或者功能。
// tailwind.config.js 示例
module.exports = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'], // 指定要扫描的文件
theme: {
extend: {
colors: {
'brand-primary': '#1d4ed8',
},
spacing: {
'128': '32rem',
}
},
},
plugins: [],
}項目安裝同構建配置
將 Tailwind CSS 整合到項目入面主要有兩種方式：透過 CDN 快速原型開發，或者透過 npm/yarn 安裝並整合到構建流程入面。對於生產項目，推薦後者以獲得最佳效能同可維護性。
透過套件管理器安裝
首先，透過 npm 或者 yarn 安裝 Tailwind CSS 同佢嘅依賴。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init初始化指令會生成一個預設嘅 tailwind.config.js 文件。 tailwind.config.js 跟住，需要創建一個 CSS 檔案（例如 styles.css） src/styles/tailwind.css並導入 Tailwind 嘅指令。
/* src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;然後，喺項目嘅 PostCSS 設定檔（例如 postcss.config.js）入面加 Tailwind CSS 同 Autoprefixer。
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}最後，確保你嘅構建工具（例如 Vite、Webpack）配置咗 PostCSS，同埋喺 HTML 模板度引入最終生成嘅 CSS 檔案。
推薦閱讀 實用指南：用 Tailwind CSS 快速構建現代化響應式網頁。
內容配置同 Tree Shaking
tailwind.config.js 入面嘅 content 選項好緊要。佢定義咗 Tailwind 構建引擎需要掃描邊啲檔案嚟搵緊用緊嘅類名。只有喺呢度列出嘅檔案入面出現嘅類，先會包含喺最終生成嘅 CSS 度。咁樣就實現到高效嘅 CSS Tree Shaking。記得根據你嘅項目結構正確配置呢個路徑，例如：content: [‘./src/**/*.{js,ts,jsx,tsx}’]。
高級功能與實戰技巧
掌握咗基礎之後，一啲高級功能可以令你喺項目中如虎添翼，寫出更簡潔、更可維護嘅代碼。
使用 @apply 提取組件類
雖然鼓勵直接喺 HTML 中使用實用類，但當某個類組合喺項目中重複出現時（例如一個特定樣式嘅按鈕），可以使用 @apply 指令喺 CSS 中將其提取為一個新嘅組件類。
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}然後喺 HTML 入面直接使用 class=“btn-primary”。呢個平衡咗實用類嘅靈活性同組件類嘅可重用性。
自定義插件開發
如果項目有特殊需求，或者你想封裝一套自己嘅實用類規則，可以開發自定義插件。插件喺 tailwind.config.js 的 plugins 數組中註冊，其基本結構係一個接收 addUtilities, addComponents, addBase, theme 等輔助函數嘅函數。
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
const newUtilities = {
'.scrollbar-hide': {
/* 隐藏滚动条的CSS */
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': { display: 'none' }
},
}
addUtilities(newUtilities);
})
]
}同前端框架深度整合
喺 React、Vue、Svelte 等組件化框架入面，Tailwind CSS 可以發揮更大威力。結合組件嘅可重用性，你可以構建出高度一致而且易於維護嘅設計系統。例如，喺 React 入面，可以創建一個可配置嘅 Button 組件，其樣式完全由傳入嘅 Tailwind 類名或者根據 props 動態生成嘅類名控制。好多現代框架嘅腳手架（例如 Next.js、Vite）都提供咗開箱即用嘅 Tailwind CSS 集成選項。
摘要
Tailwind CSS 透過其功能優先、原子化 CSS 類嘅設計哲學，徹底改變咗開發者編寫樣式嘅方式。佢透過提供一套完整嘅、可定制化嘅設計系統，將樣式決策從 CSS 檔案轉移到 HTML/JSX 模板入面，從而實現更快嘅 UI 開發速度、更少嘅上下文切換、同埋更細嘅生產包體積。從基礎嘅實用類組合、響應式設計，到透過配置文件進行深度定制，再到使用 @apply 同自定義插件等進階技巧，Tailwind CSS 為構建現代化、高效能嘅 Web 介面提供咗一套強大而靈活嘅工具集。雖然佢嘅學習曲線初期在於記憶類名，但一旦掌握，開發效率就會得到顯著提升。
常見問題
Tailwind CSS 生成嘅 CSS 檔案會唔會好大？
唔會，呢個正正係 Tailwind CSS 嘅核心優勢之一。喺生產構建嗰陣，Tailwind 會用 PurgeCSS（而家已經集成咗喺引擎入面）嚟掃描你嘅項目文件（跟返 tailwind.config.js 中 content 嘅設定），同埋只會保留實際用咗嘅 CSS 類。咁樣意味住最終生成嘅 CSS 文件通常只有幾 KB 到幾十 KB，非常精簡。
喺 HTML 入面寫咁多類名，會唔會令到代碼好難睇得明？
呢個確實係一個常見嘅顧慮。對於簡單嘅元素，類名列表好短，可讀性好好。對於複雜嘅元素，類名列表會變長，可以透過一啲實踐嚟改善：1. 用 Prettier 插件對類名進行自動排序同格式化；2. 對於喺多個地方重複出現嘅複雜樣式組合，用 @apply 將佢提取成單個 CSS 類；3. 喺組件化框架（例如 React、Vue）入面，將複雜嘅 UI 部分封裝成獨立組件，將類名邏輯收埋喺組件內部。
Tailwind CSS 適合同邊啲 UI 組件庫一齊用？
Tailwind CSS 本身係低層次嘅樣式工具，佢可以同任何唔強制自帶樣式嘅「無頭 UI」（Headless UI）組件庫完美配合，例如 Headless UI、Radix UI、Downshift 等等。呢啲庫只係提供完整嘅互動邏輯同行為，而將樣式控制權完全交俾開發者，啱啱可以用 Tailwind CSS 來自定義樣式。對於已經自帶樣式嘅組件庫（例如 Material-UI、Ant Design），通常唔建議同 Tailwind 混用，因為樣式體系可能會撞。
點樣自訂主題顏色或者間距？
所有自訂設定都喺 tailwind.config.js 檔案嘅 theme 部分完成。你可以直接覆蓋預設值，更推薦用 extend 喺保留預設值嘅基礎上進行擴展。例如，要加一個品牌色，可以喺 theme.extend.colors 入面加 ‘brand’: ‘#ff0000’，然後就可以用到 bg-brand, text-brand-500 等class喇。間距、字型、斷點等其他主題屬性嘅自訂方式都差唔多。
Tailwind CSS 對瀏覽器兼容性點樣？
Tailwind CSS 嘅默認構建會用 Autoprefixer 自動加供應商前綴，以支援現代瀏覽器。佢生成嘅樣式兼容性好好。但係，一啲較新嘅 CSS 功能（例如 CSS Grid、Flexbox gap 嘅某啲用法）喺唔支援嘅舊瀏覽器入面可能用唔到。你可以透過配置 tailwind.config.js 入面嘅 target 選項或者調整 PostCSS 嘅瀏覽器兼容性清單（browserslist）去控制最後輸出嘅 CSS 兼容性級別。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。