主頁/知識/網站開發/內容詳情

Tailwind CSS 入門與實戰指南：從零構建現代化響應式界面

3分鐘閱讀
2026-03-21
2,904
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

咩係 Tailwind CSS

Tailwind CSS 係一個功能優先嘅 CSS 框架，佢透過提供大量可組合嘅實用類別（Utility Classes）嚟幫開發者快速構建自訂用戶介面。同 Bootstrap 等提供預設組件嘅框架唔同，Tailwind CSS 唔提供任何全功能嘅組件，而係提供細粒度、原子化嘅 CSS 類別，等你可以直接喺 HTML 度寫樣式。

其核心理念係「實用優先」。即係話你唔使喺 CSS 檔案同 HTML 檔案之間反覆切換，亦唔使為咗組件絞盡腦汁咁命名類別（例如 .card__header--active）。你只需要將一系列描述性嘅工具類別組合埋一齊，就可以實現任何設計。例如，要整一個有圓角、內邊距同陰影嘅卡片，你只需要寫 class="rounded-lg p-6 shadow-md"。呢種方式大大提升咗開發效率，同時保持咗樣式嘅一致性。

環境搭建同基礎配置

開始用 Tailwind CSS 有多種方法，最主流嘅係透過佢嘅命令行工具同項目構建流程整合。

推薦閱讀 解鎖 Tailwind CSS 嘅潛力：從基礎到高級嘅實用指南。

透過 npm 安裝核心包

首先，你需要透過 npm 或 yarn 安裝 Tailwind CSS 同佢嘅依賴。喺你嘅項目根目錄下執行以下命令：

WordPress.com 網站建設工具
WordPress.com 網站建設工具
99.9991% 運作時間 + 跨地區災難恢復,24/7 支援,購買博客套裝即可免費使用 AI 驅動嘅網站建設工具。
免費域名一年
造訪 WordPress.com 網站建設工具 →
UltaHost 網站建設工具
UltaHost 網站建設工具
超過900個免費、可自訂嘅範本,助你具備優化網站搜尋可見度所需嘅SEO能力。
特別優惠 40%
造訪 UltaHost 網站建設工具 → 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

呢個會安裝 Tailwind CSS、用嚟處理 CSS 嘅 PostCSS，同埋自動加瀏覽器前綴嘅 Autoprefixer。同時，npx tailwindcss init 指令會產生一個預設嘅設定檔 tailwind.config.js。

配置內容路徑同生成 CSS

跟住，你需要配置 tailwind.config.js 檔案，指定 Tailwind 應該掃描邊啲檔案嚟生成相應嘅樣式。喺 content 陣列度加返你嘅模板檔案路徑。

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

跟住，創建一個主 CSS 檔案（例如 src/input.css），並加入 Tailwind 嘅指令。

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

最後，透過命令行運行構建過程，將你嘅輸入 CSS 處理成最終可用嘅樣式檔案。

推薦閱讀 精通 Tailwind CSS：由入門到實戰嘅實用指南。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

而家，你可以喺 HTML 入面引入生成嘅 ./dist/output.css 檔案，然後開始用 Tailwind 嘅實用類喇。

核心實用類同響應式設計

Tailwind CSS 嘅實用類涵蓋咗幾乎所有 CSS 屬性，而且跟住一套嚴謹嘅命名系統同設計令牌。

常用工具類速覽

工具類嘅命名通常直接對應 CSS 屬性，同埋用縮寫。例如：
* 间距：p-4 （內距：1rem），, m-2 （外邊距：0.5rem），, space-x-4 （子元件水平間距）。
* 排版：text-lg （字體大小），, font-bold （字體粗幼），, text-center （文字對齊）。
* 颜色：bg-blue-500 （背景顏色），, text-gray-800 （文字顏色），, border-red-300 (邊框顏色)。
* 布局：flex, items-center （align-items: center），, justify-between （justify-content: space-between）。
* 尺寸：w-64 (闊度: 16rem), h-full (高度: 100%)。
* 效果：rounded (圓角), shadow (陰影), opacity-50 （透明度）。

Bluehost 網站建設工具
提供 AI 網站製作工具、24/7 線上聊天及電話支援、一年免費網域名、免費 CDN,以及 99.991% uptime SLA。
網站建設助理標誌 瀏覽Bluehost

實現響應式佈局

Tailwind 採用移動優先嘅斷點系統。默認嘅實用類係針對移動裝置設計，要喺更大嘅屏幕上套用樣式，就需要加上對應嘅響應式前綴。
其斷點前綴包括：sm: （640px），, md: （768px），, lg: （1024px），, xl: （1280px），, 2xl: （1536px）。

例如，以下代碼創建咗一個默認堆疊、喺中等屏幕上並排排列嘅佈局：

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">左邊內容</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">右邊內容</div>
</div>

透過組合呢啲前綴，你可以輕鬆構建出適應所有屏幕尺寸嘅複雜響應式界面。

推薦閱讀 Tailwind CSS 終極指南：從入門到精通，構建現代化網站。

實戰：構建一個導航欄組件

等我哋透過構建一個常見嘅響應式導航欄，將學到嘅知識融會貫通。呢個導航欄喺大屏幕上水平顯示，喺細屏幕上摺疊成漢堡菜單。

編寫基礎結構同樣式

首先，我哋創建導航欄嘅 HTML 骨架，並套用基礎樣式。

主機網
免費 SSL、Cloudflare CDN、WAF,可選擇超過 40 個全球數據中心,就近選擇以降低延遲。提供全年無休 24/7/365 服務支援。即刻可省最多 £671。支援 AI 驅動開發及 SEO 優化。
標誌 瀏覽 hosting.com 
<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">我個品牌</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">主頁</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">關於我哋</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">服務</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">聯絡</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">打開主選單</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

呢個時候，桌面端導航已經完成。我哋用 hidden md:block 控制桌面導航連結只喺中等及以上屏幕顯示。

加入互動性同流動選單

為咗喺手機版點擊按鈕嗰陣顯示菜單，我哋需要借少少 JavaScript 幫手。呢度用簡單嘅原生 JS 嚟切換一個控制菜單顯示嘅類。
首先，幫手機菜單按鈕同菜單內容加 ID，同埋改一改菜單按鈕去觸發函數。

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">主頁</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">關於我哋</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">服務</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">聯絡</a>
  </div>
</div>

跟住，喺頁面底部加返段腳本。

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

到呢一步，一個功能完整嘅響應式導航欄就整好喇。透過組合唔同嘅實用類，我哋連一行自訂 CSS 都唔使寫就整好咗呢個組件。

摘要

Tailwind CSS 透過佢「實用優先」嘅理念，徹底改變咗開發者寫樣式嘅方式。佢將樣式決策由 CSS 檔案轉移到 HTML 模板入面，透過組合細粒度嘅工具類，實現咗極高嘅開發效率同設計一致性。由環境配置、核心工具類嘅使用，到響應式斷點系統同實戰組件構建，Tailwind 提供咗一套完整且高效嘅現代化介面開發工作流。

雖然初期需要記大量類名，但佢直觀嘅命名規則同優秀嘅文檔可以令你好快上手。對於追求開發速度、設計自由度同最終包體積控制嘅團隊同項目嚟講，Tailwind CSS 無疑係一個強大而優雅嘅解決方案。

常見問題

Tailwind CSS 嘅樣式檔案會唔會好大？

唔會。Tailwind CSS 喺生產環境中會用 PurgeCSS（而家係內容掃描）技術，佢會分析你嘅項目檔案，只會將你實際用到嘅工具類打包到最終嘅 CSS 檔案入面。呢樣可以確保生成嘅 CSS 檔案非常精簡，通常只有幾 KB 到十幾 KB。

同 Bootstrap 相比，Tailwind CSS 嘅主要優勢係咩？

Tailwind CSS 提供咗更高嘅自訂自由度。Bootstrap 提供嘅係預製、有特定外觀嘅組件，要定制就需要覆蓋大量 CSS。而 Tailwind 提供嘅係原始樣式「材料」，你可以組合出完全符合設計稿嘅獨特組件，唔使同框架嘅預設樣式鬥爭，亦都避免咗臃腫嘅 CSS 覆蓋代碼。

喺團隊項目入面，點樣保持 Tailwind CSS 代碼嘅一致性？

可以結合使用 Tailwind CSS 嘅設定檔同 IDE 插件。喺 tailwind.config.js 度統一設定項目嘅顏色、間距、字體等設計令牌。團隊成員可以用官方嘅 VS Code 或者 IntelliJ IDE 插件，呢啲插件提供自動補全、語法高光同埋懸浮預覽功能，可以有效減少類名串錯嘅情況，提升開發效率。

點樣處理 Tailwind CSS 入面複雜嘅懸浮或者焦點狀態？

Tailwind CSS 為狀態變體提供咗豐富嘅前綴，例如 hover:, focus:, active:, disabled: 等等。你可以好輕鬆咁加喺任何工具類前面。例如，hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 可以為一個按鈕定義懸停時嘅背景色同埋獲得焦點時嘅環狀輪廓。

下一步應該點做?

如果你想快速搭建網站,下一步就係比較唔同網站建設平台嘅模板功能、擴展性同埋持續維護成本。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

標籤: