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

Tailwind CSS 入門同實戰：從零構建現代化響應式網頁界面

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

咩係 Tailwind CSS

Tailwind CSS 係一個功能優先嘅 CSS 框架，佢透過提供大量低階嘅實用類別，幫你快速建立自訂設計。同 Bootstrap 呢類提供預設組件（例如按鈕、卡片）嘅框架唔同，Tailwind 提供嘅係構建呢啲組件所需嘅「原子類別」，例如用嚟控制內邊距嘅 p-4、控制文字顏色嘅 text-blue-500 同控制彈性盒子佈局嘅 flex。呢種方法嘅核心理念係將樣式直接寫喺 HTML 裡面，從而大大提升開發效率，同埋保持設計嘅高度一致性。

佢嘅核心工作原理

Tailwind 嘅核心引擎係一個用 JavaScript（Node.js）寫嘅 PostCSS 插件。喺構建過程中，佢會掃描你嘅項目文件，搵出所有用過嘅實用類，然後只係將呢啲用過嘅 CSS 樣式生成到最終嘅生產環境 CSS 檔案入面。呢個過程叫做「搖樹優化」，佢可以確保最終生成嘅 CSS 檔案體積盡可能細，避免咗傳統 CSS 框架需要引入成個庫嘅冗餘問題。你可以喺 tailwind.config.js 呢個配置檔案入面自訂主題顏色、間距比例、斷點等所有設計參數。

點樣開始用 Tailwind CSS

開始使用 Tailwind CSS 有好多種方式，最推薦嘅係透過佢嘅官方 CLI 工具或者同前端構建工具集成。以下係透過 npm 同 PostCSS 集成嘅標準流程，咁樣可以令你喺項目入面得到最完整嘅特性同最佳嘅性能。

推薦閱讀 Tailwind CSS 終極入門指南：由零到一構建現代化介面。

首先，你需要初始化一個項目，然後透過 npm 安裝 Tailwind 同佢嘅依賴。

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

安裝完成之後，你會得到一個 tailwind.config.js 檔案。你需要修改呢個檔案入面嘅 content 字段，去指定 Tailwind 應該掃描邊啲檔案嚟搵用咗嘅類名。通常呢啲會係你嘅 HTML 模板、JavaScript 組件檔案等等。

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

跟住，開一個主 CSS 檔案（例如 src/input.css），同埋引入 Tailwind 嘅指令。

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

最後，配置構建過程。如果你用緊好似 Vite 呢類工具，你需要確保 PostCSS 配置正確。創建一個 postcss.config.js 檔案。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

而家，運行構建命令（例如 npm run build，具體睇返你嘅腳本配置），Tailwind 就會處理你嘅 CSS 檔案，生成最終嘅樣式。然後你就可以喺 HTML 入面開始用 Tailwind 嘅實用類喇。

推薦閱讀 掌握Tailwind CSS：從入門到精通嘅實用指南與最佳實踐。

核心實用類同響應式設計

Tailwind 嘅實用類涵蓋咗 CSS 嘅方方面面，由佈局、間距、排版到背景、邊框同特效。佢嘅設計系統具有高度一致性，例如間距用統一比例（好似 0.25rem 嘅倍數），顏色有預先定義嘅調色板。

佈局同間距類

佈局類好似 flex, grid, block, inline-block 可以直接用。間距透過 p-{size}（內邊距）同 m-{size}（外邊距）嚟控制，例如 p-4 表示 1rem 嘅內邊距，mt-2 表示 0.5rem 嘅上邊距。

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">項目一</div>
  <div class="p-2 bg-gray-200">項目二</div>
</div>

響應式斷點前綴

Tailwind 嘅響應式設計係佢其中一個強大功能。佢內置咗五個默認斷點：sm （640px），, md （768px），, lg （1024px），, xl （1280px），, 2xl （1536px）。透過喺實用類前面加斷點前綴，你可以輕鬆整到響應式介面。例如，md:flex 表示喺中等屏幕同以上用彈性佈局，text-center lg:text-left 表示默認居中，喺大屏幕上靠左對齊。

Bluehost 網站建設工具
提供 AI 網站製作工具、24/7 線上聊天及電話支援、一年免費網域名、免費 CDN,以及 99.991% uptime SLA。
網站建設助理標誌 瀏覽Bluehost 
<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4">左邊內容</div>
  <div class="w-full md:w-1/2 p-4">右邊內容</div>
</div>

實戰：構建一個響應式導航欄

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

首先，我哋編寫大屏幕下嘅水平導航結構。

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">我個品牌</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">主頁</a>
      <a href="#" class="text-gray-300 hover:text-white">關於</a>
      <a href="#" class="text-gray-300 hover:text-white">服務</a>
      <a href="#" class="text-gray-300 hover:text-white">聯絡</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">主頁</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">關於</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">服務</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">聯絡</a>
  </div>
</nav>

加入互動功能

上面嘅 HTML 結構透過 hidden 同埋 md:flex 等 class 實現咗響應式佈局。要喺手機度切換菜單嘅顯示同隱藏，我哋需要少少簡單嘅 JavaScript。

推薦閱讀 Tailwind CSS終極指南：從入門到精通嘅實戰教程。

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

呢個例子示範咗點樣只係用 Tailwind 嘅 utility class 同一個簡單嘅 JavaScript 函數，就可以快速整到一個功能齊全、外觀專業嘅響應式組件。你可以透過修改背景色、間距、hover 效果等 class，輕鬆噉調整佢嘅外觀去配合你嘅品牌設計。

摘要

Tailwind CSS 透過佢功能優先嘅 utility class 方法論，徹底改變咗前端開發者寫樣式嘅方式。佢消除咗喺 HTML 同 CSS 檔案之間頻密切換嘅 context switching 成本，透過約束性嘅設計系統確保咗 UI 嘅一致性，並借助先進嘅構建時優化保證咗產出嘅高性能。由簡單嘅原型到複雜嘅企業級應用，Tailwind 都能夠提供出色嘅開發體驗同可維護性。掌握佢嘅核心 utility class、響應式前綴同配置方法，將能夠顯著提升你嘅前端開發效率同設計實現能力。

主機網
免費 SSL、Cloudflare CDN、WAF,可選擇超過 40 個全球數據中心,就近選擇以降低延遲。提供全年無休 24/7/365 服務支援。即刻可省最多 £671。支援 AI 驅動開發及 SEO 優化。
標誌 瀏覽 hosting.com

常見問題

Tailwind CSS 生成嘅 CSS 檔案會唔會好大？

唔會，呢個正正係 Tailwind 設計嘅精妙之處。喺生產構建階段，Tailwind 會用 PurgeCSS（而家整合喺引擎內部）嚟「搖樹」，佢只會保留你實際喺 HTML、JavaScript 等模板檔案用過嘅 CSS 類。最終生成嘅 CSS 檔案通常只有幾 KB 到幾十 KB，比好多傳統 CSS 框架細得多。

喺 HTML 入面寫咁多類名，會唔會令代碼好難閱讀同維護？

呢個確實係一個常見嘅初期顧慮。實踐表明，將樣式同結構擺喺相近嘅位置，實際上降低咗搵同修改樣式嘅認知負擔。對於複雜嘅組件，你可以用 Tailwind 嘅 @apply 指令將常用嘅實用類提取到 CSS 中，創建自訂嘅組件類。另外，良好嘅編輯器擴展（例如 Tailwind CSS IntelliSense）能夠提供自動補全同懸停預覽，極大咁改善咗開發體驗。

Tailwind CSS 適合同邊啲 JavaScript 框架一齊使用？

Tailwind CSS 係框架無關嘅，佢可以同任何前端框架或者庫完美配合。喺 React、Vue.js、Angular、Svelte 以及傳統嘅靜態網站生成器（例如 Next.js, Nuxt.js, Gatsby, Hugo）中都有極佳嘅支援同廣泛嘅社群應用。佢嘅工作流程（掃描檔案、生成樣式）可以無縫整合到呢啲框架嘅構建工具鏈中。

點樣自訂 Tailwind 嘅默認主題，例如品牌顏色？

自訂主題主要係通過修改項目根目錄下嘅 tailwind.config.js 用配置文件搞掂。你可以喺 theme.extend 對象入面加或者覆蓋默認值。例如，要加自訂嘅品牌顏色，可以咁樣配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

配置完成之後，你就可以喺項目度用 bg-brand-blue 或 text-brand-blue 咁樣嘅類啦。所有核心嘅尺寸、字體、斷點等等都可以用類似嘅方式進行定制。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: