咩係 Tailwind CSS
喺而家嘅Web開發領域，Tailwind CSS 係一套功能優先嘅實用工具集CSS框架。佢同傳統嘅Bootstrap或者Foundation呢類組件庫有根本性嘅唔同。Tailwind CSS 唔提供預先構建好、有固定樣式嘅UI組件（例如按鈕、卡片），而係提供一套細粒度、原子化嘅CSS類，容許開發者直接喺HTML入面組合呢啲類嚟構建任何自訂設計。
佢嘅核心哲學係「實用優先」。即係話，你唔使喺CSS檔案入面寫自訂嘅類名同樣式規則，而係用好似 text-blue-600、p-4、rounded-lg、flex 噉樣有明確功能嘅類名。呢種方式大大提升咗開發效率，減少咗喺 CSS 同 HTML 檔案之間來回切換嘅認知負擔，而且通過約束設計系統（例如間距、顏色、字體大小嘅預設值），確保咗 UI 嘅一致性。
Tailwind CSS 透過一個設定檔案 tailwind.config.js 提供咗強大嘅自訂能力。你可以喺度定義你項目嘅調色板、字體、斷點、間距比例等設計標記，從而將框架完全配合到你嘅品牌指南入面。另外，佢內置嘅響應式設計、狀態變體（例如懸停、聚焦）同暗黑模式支援，令到構建現代化、互動式介面變得異常簡單。
推薦閱讀 深入理解 Tailwind CSS：從實用工具類到現代 Web 開發實踐。
點樣開始用 Tailwind CSS
開始使用 Tailwind CSS 有好多種方式，最推薦嘅係透過佢官方嘅 PostCSS 插件進行安裝，咁樣可以獲得最佳嘅效能同開發體驗。
透過 npm 同 PostCSS 安裝
呢個係最集成化嘅方式，適合大多數現代前端構建流程，例如同 Vite、Webpack 或者 Next.js 一齊用。
首先，喺項目根目錄下透過 npm 或者 yarn 初始化並安裝必要嘅依賴：
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init呢個指令會生成一個默認嘅 tailwind.config.js 設定檔。跟住，你需要配置 PostCSS。通常，項目根目錄下會有一個 postcss.config.js 檔案，將佢嘅內容設定為：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}建立你嘅 CSS 檔案
喺你嘅主 CSS 檔案（例如 src/styles.css 或 input.css）入面，使用 @tailwind 指令嚟注入 Tailwind CSS 各個層面：
推薦閱讀 掌握 Tailwind CSS：從基礎入門到實戰項目高效開發。
@tailwind base;
@tailwind components;
@tailwind utilities;@tailwind base 注入嘅係 Tailwind CSS 嘅基礎樣式，用嚟重置瀏�器預設樣式同設定一啲基本嘅全局規則。@tailwind components 用嚟注入任何透過 @apply 指令或框架本身定義嘅組件類。@tailwind utilities 咁就注入咗所有實用工具類，呢個係你日常用得最多嘅部分。
構建同使用
最後，確保你嘅構建工具（例如 Vite）已經設定好處理 PostCSS。然後，喺你嘅 HTML 檔案入面引入最終生成嘅 CSS 檔案就可以開始使用喇。
核心實用類同響應式設計
Tailwind CSS 佢嘅強大之處在於佢全面而且一致嘅實用類命名系統。每個類都對應一個單一嘅 CSS 屬性。
佈局與間距
對於佈局，你可以用 flex、grid、block、inline-block 等類。間距系統係基於一個可以配置嘅比例。例如，m-4 表示 margin: 1rem;，p-2 表示 padding: 0.5rem;。方向就通過後綴控制，好似 mt-4（上邊距）pr-2（右邊內邊距）、mx-auto（水平方向自動外邊距，用嚟居中）。
顏色同排版
顏色類名跟住 {属性}-{颜色}-{深浅} 嘅模式。例如，bg-blue-500 設定藍色背景，text-gray-800 設定深灰色文字，border-red-300 設定淺紅色邊框。排版方面，text-sm、text-lg、font-bold、text-center 等類可以快速控制字體大小、粗細同對齊。
響應式斷點
Tailwind CSS 響應式設計係佢嘅亮點之一。佢默認提供咗五個斷點前綴：sm:、md:、lg:、xl:、2xl:。你可以喺任何實用類前面加呢啲前綴，嚟指定該樣式喺特定屏幕寬度及以上時生效。
推薦閱讀 係乜嘢令 Tailwind CSS 成為現代前端開發嘅首選框架。
例如，以下代碼創建咗一個默認堆疊、喺中等屏幕上變為水平佈局嘅容器：
<div class="flex flex-col md:flex-row">
<div class="p-4 md:w-1/2">左邊內容</div>
<div class="p-4 md:w-1/2">右邊內容</div>
</div>喺呢個例子入面，flex-col 係默認嘅（流動裝置優先），當屏幕寬度達到 md 斷點（默認為 768px）時，md:flex-row 會覆蓋佢，令容器變為行排列。同時，子元素寬度喺中等螢幕及以上變為一半。
高級定製與最佳實踐
雖然實用類喺 HTML 中組合非常方便，但為咗保持代碼嘅可維護性，需要跟返一啲最佳實踐。
提取組件同使用 @apply
如果一個複雜嘅樣式組合喺多個地方重複出現，將佢提取為一個自訂嘅 CSS 類會係更好嘅選擇。Tailwind CSS 提供咗 @apply 指令，容許你喺自訂嘅 CSS 中將多個實用工具類「應用」到一個新嘅類名上面。
例如，喺你嘅 CSS 檔案入面：
.btn-primary {
@apply py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}然後，喺 HTML 入面你就可以簡單咁使用 class=”btn-primary”。咁樣做既可以保留實用類嘅設計約束，又可以避免 HTML 入面過長嘅類名列表。
深度定制設定檔
tailwind.config.js 係你嘅設計系統中樞。你可以喺呢度擴展或者完全覆蓋預設主題。
module.exports = {
content: [‘./src/**/*.{html,js,ts,jsx,tsx}’], // 告诉 Tailwind 在哪里扫描类名
theme: {
extend: {
colors: {
‘brand-blue’: ‘#1d4ed8’,
},
spacing: {
‘128’: ‘32rem’,
},
fontFamily: {
‘sans’: [‘Inter’, ‘system-ui’, ‘sans-serif’],
},
},
},
plugins: [],
}透過 extend 物件，你可以喺保留預設值嘅基礎上加入新嘅設定。如果直接修改 theme 嘅屬性（例如 theme.colors），就會完全取代呢個配置項。
利用 JIT 模式同 Tree Shaking
由版本開始，Tailwind CSS 引入咗 Just-In-Time (JIT) 引擎，而且已經成為默認模式。JIT 模式會按需要生成 CSS，而唔係預先整好包含所有可能類別嘅超大 CSS 檔案。呢個意思係：
1. 开发构建速度极快。
2. 你可以使用任意值，如 mt-[17px] 或 bg-[#1da1f2]，唔使預先設定。
3. 生产环境的 CSS 文件体积极小，因为只包含你实际用到的样式。
確保你嘅 content 配置正確，JIT 引擎先至能夠正確掃描同生成樣式。
摘要
Tailwind CSS 透過佢「實用優先」嘅理念，徹底改變咗開發者寫 CSS 嘅方式。佢透過提供一套原子化、功能明確嘅類名，將樣式構造從樣式表轉移到標記語言中，從而顯著提升咗 UI 開發嘅效率同一致性。佢強大嘅響應式設計系統、高度可自訂嘅配置，同埋 JIT 模式帶嚟嘅性能優勢，令佢成為構建現代化、高性能網頁嘅絕佳選擇。雖然初頭要記一啲類名，但一旦熟手，佢帶嚟嘅開發速度同設計一致性回報係好大嘅。對於追求快速迭代同設計靈活性嘅團隊同項目嚟講，Tailwind CSS 無疑係一個強而有力嘅工具。
常見問題
Tailwind CSS 會唔會令 HTML 類名好長好亂？
確實，直接使用大量實用類可能會令 HTML 元素上嘅 class 屬性變得冗長。呢個係 Tailwind CSS 最常被提到嘅缺點。
為咗解決呢個問題，最佳實踐係：對於喺項目度重複出現、複雜嘅樣式組合，用 @apply 指令將佢提取到 CSS 檔案入面，封裝成有語義嘅自訂組件類（例如 .btn, .card）。噉樣就保持咗 HTML 嘅整潔，又用咗 Tailwind CSS 嘅設計系統。另外，喺支援組件化嘅框架（例如 React、Vue）入面，你可以將樣式封裝喺組件內部，對外只暴露乾淨嘅組件標籤，噉就可以喺組件層面解決類名冗長嘅問題。
點樣覆蓋或者修改 Tailwind 預設嘅樣式？
覆蓋或者修改樣式主要有兩種途徑。第一種係用 tailwind.config.js 檔案入面嘅 theme.extend 對象。呢個係推薦嘅方式，用嚟擴展默認嘅設計系統，例如加新嘅顏色、間距或者斷點。第二種方式係喺 HTML 裏面利用 CSS 嘅特異性。你可以透過加更具體嘅選擇器或者用 !important 後綴嘅類別（例如 !text-red-500）嚟覆蓋樣式，但係應該謹慎用後者，以免搞亂樣式管理。
Tailwind CSS 適合同邊啲前端框架一齊用？
Tailwind CSS 同所有主流前端框架都可以完美整合。佢喺 React、Vue.js、Angular、Svelte 等等框架嘅社區度都好流行。好多框架嘅官方腳手架或者流行模板（例如 Next.js 嘅 create-next-app、Vite 嘅模板）都直接提供咗集成 Tailwind CSS 嘅选项。佢基于类名嘅使用方式同呢啲框架嘅组件化思维高度契合，你可以轻松噉喺组件模板或者 JSX 里面应用实用类。
用 Tailwind 會唔會影響網站嘅性能㗎？
恰恰相反，正確使用 Tailwind CSS 通常都会提升网站性能。呢个主要归功于佢默认嘅 JIT（即时编译）模式。JIT 引擎净係会生成你喺项目入面实际用到嘅 CSS 类，并且进行极致嘅压缩。即係话最终打包到生产环境嘅 CSS 文件体积非常细，通常净係得几 KB 到十几 KB，远细过手写或者用传统组件库生成嘅 CSS。更细嘅 CSS 文件即係更快嘅下载同解析速度，从而对性能产生积极影响。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。