前端超好用工具！ - 用 Tailwind CSS 打造飛速開發的前端風格 (Day27) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 27

佛心分享-IT 人自學之術

30 天體驗：從程式菜鳥到前端新手工程師系列第 27 篇

前端超好用工具！ - 用 Tailwind CSS 打造飛速開發的前端風格 (Day27)

17th鐵人賽

tingisgood

2025-10-11 23:28:47

45 瀏覽

分享至

我們已經學習了前端三巨頭-HTML、CSS、JS的基本架構
也透過所學製作出一個可愛方便好用的記事本網頁
接下來就來教大家一個在寫網頁時非常好用的工具「Tailwind CSS」

什麼是 Tailwind CSS？

Tailwind CSS 是一個「工具化」的 CSS 框架。
它讓你不必自己寫 CSS，
只要在 HTML 裡加上「簡短的 class 名稱」，
就能快速完成排版、配色、字體、間距等設計！

範例：

傳統 CSS：

.button {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
}

Tailwind 寫法 (在HTML裡面，寫在CLASS後面)：

<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">
  按我！
</button>

是不是少超多程式碼？
因為 Tailwind 幫你準備好常用的樣式，
像 bg-blue-500 就是背景藍色、px-4 是左右內距、rounded-lg 是圓角大
而且顏色、大小都能即時改，不用再切換檔案！

快速使用 Tailwind（CDN 版本）

如果你只是想練習或做小型專案，不需要安裝環境，
只要在 HTML 的 < head > 加上一行就能直接使用！

< script src="https://cdn.tailwindcss.com" >< /script >

舉例來說：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Tailwind 練習</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center p-8">
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
  <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
    點我
  </button>
</body>
</html>

儲存後打開，馬上就能看到現代風格的按鈕和排版

備註：CDN（Content Delivery Network，內容傳遞網路）
是一種把網站的靜態資源（像是圖片、CSS、JavaScript）分散放在世界各地伺服器上的技術。
它的主要目的是：
• 加快載入速度（使用者會連到離他最近的伺服器）
• 減少主伺服器壓力
• 提高穩定性與可用性

但它也有些缺點像是：沒辦法自訂設定（像是改色系、增加插件）、網頁要能連線才能載入（離線失效）
因此這種快速方法只適合小專案使用

Tailwind 的核心概念：

Tailwind 提供一堆小小的「功能 class」，
你只要像積木一樣「組起來」，就能快速做出漂亮的排版。

Tailwind 的設計邏輯是「直覺＋快速」——
所有 class 名稱都能一眼看出用途，不用再翻 CSS！

實作練習：做一張小卡片

馬上來練習一下
用 Tailwind 寫一張乾淨的小卡片設計：

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-xl p-6">
  <h2 class="text-2xl font-bold text-gray-800 mb-2">待辦事項</h2>
  <p class="text-gray-600">用 Tailwind 打造美美的清單介面 </p>
  <button class="mt-4 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
    開始使用
  </button>
</div>

小提醒：
• max-w-sm 控制卡片寬度、
• mx-auto 讓卡片水平置中、
• shadow-lg 加上柔和陰影、
整體就會非常有質感

為什麼前端開發者這麼愛用 Tailwind？

1.開發速度快：不用再寫一大堆 CSS。
2.即時預覽：改 class 就能馬上看到效果。
3.設計一致：團隊使用相同色系與排版規則。
4.好整合：可搭配 React、Vue、Next.js 等框架。
5.可客製化：大專案可以用設定檔自由修改樣式。

今日小結

今天你學會了：
• 什麼是 Tailwind CSS
• 如何使用 CDN 快速啟用
• 各種常用語法與屬性
• 打造一張漂亮的小卡片

Tailwind 讓你用「class 名稱」寫出漂亮的網頁設計，
比傳統 CSS 更快速、彈性又一致。

明日預告：Day 28 — Tailwind 進階應用！

明天，我們要實際把 Tailwind 用在我們的「待辦清單」小專案上，
讓它變成一個乾淨又現代的網站介面！
敬請期待~