恭喜你走到這裡！
這一路從 HTML、CSS、JavaScript，到昨天的 Tailwind 開發環境，
你已經具備打造網站的完整基礎囉~
今天，我們要把之前的「待辦清單」小專案，
升級成 Tailwind 風格的現代 UI 版本！
這不只讓外觀更美，也能體驗 Tailwind 快速開發的威力😎
今日目標
1.將原本的 CSS 樣式改成 Tailwind 寫法
2.讓清單更美觀、更有層次
3.認識 Tailwind 的核心概念：實用類別（Utility Classes）
Step 1：引入 Tailwind CDN
在你的 index.html 的 < head > 區域加入以下這行：
<script src="https://cdn.tailwindcss.com"></script>
這樣就能立即在網頁中使用 Tailwind 的樣式啦
（不用安裝、不用設定，超快速！）
Step 2：改寫 HTML 結構
以下是我們改良後的 HTML：
每個區塊都用 Tailwind class 做排版與配色設定
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的待辦清單</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800 font-sans flex flex-col items-center min-h-screen p-6">
<div class="bg-white shadow-lg rounded-xl w-full max-w-md p-6">
<h2 class="text-2xl font-bold mb-4 text-center text-blue-600">📋 我的待辦清單</h2>
<!-- 輸入區 -->
<div class="flex mb-4 gap-2">
<input id="taskInput"
type="text"
placeholder="輸入待辦事項..."
class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400">
<button id="addBtn"
class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
新增
</button>
</div>
<!-- 篩選區 -->
<div class="flex flex-wrap justify-center gap-2 mb-4">
<button class="filter-btn bg-gray-200 hover:bg-gray-300 text-sm px-3 py-1 rounded" data-filter="all">全部</button>
<button class="filter-btn bg-gray-200 hover:bg-gray-300 text-sm px-3 py-1 rounded" data-filter="active">未完成</button>
<button class="filter-btn bg-gray-200 hover:bg-gray-300 text-sm px-3 py-1 rounded" data-filter="completed">已完成</button>
<button id="clearBtn" class="bg-red-400 hover:bg-red-500 text-white text-sm px-3 py-1 rounded">清空全部</button>
</div>
<!-- 清單區 -->
<ul id="taskList" class="space-y-2"></ul>
<!-- 主題切換 -->
<button id="themeToggle"
class="mt-4 text-sm text-blue-500 underline hover:text-blue-700">
切換主題
</button>
</div>
<script src="script.js" defer></script>
</body>
</html>
Step 3：CSS？不用了！
Tailwind 的特色就是「以類別取代 CSS」。
每個 class 都代表一個樣式規則，像是：
bg-gray-100 ( 背景顏色為淺灰色)
text-center ( 文字置中)
rounded-lg ( 圓角)
shadow-lg ( 投影效果)
hover:bg-blue-600 ( 滑鼠移上去變深藍色)
space-y-2 ( 子元素之間間距為 0.5rem)
你可以自由組合它們，就能快速完成設計！
而且完全不必切換回 CSS 檔案
Step 4：JS 功能不變！
保留我們之前的 script.js，功能一樣包括：
• 新增任務
• 刪除任務
• 點擊文字切換「完成」狀態
• 主題切換（亮 / 暗模式）
Tailwind 只負責「外觀」，JS 還是我們的互動核心。
💡小技巧：主題切換也能用 Tailwind 寫！
Tailwind 有一個超方便的「dark mode」模式，
只要在 tailwind.config.js（或 CDN 設定）開啟：
JS：
tailwind.config = {
darkMode: 'class'
}
之後在 HTML 中加上：
<body class="dark:bg-gray-900 dark:text-white">
並透過 JS 切換 .dark class，
就能輕鬆完成亮／暗主題切換！
今日總結
今天我們學會了：
✅ 使用 Tailwind CDN 快速套用樣式
✅ 將純 CSS 改寫成 Tailwind utility class
✅ 理解 Tailwind 的設計邏輯
✅ 讓清單網站外觀更現代、更整潔
明日預告（Day 29）
時間過好快！接下來我們這個系列居然剩下兩天而已了！！！
倒數第二天，我們要教你如何把這個小專案「上傳到 GitHub Pages」
讓它成為一個可以分享的線上網站~
學完之後，你就完成第一個「能線上使用的作品網站」
可以跟你的朋友們炫耀你已經會寫前端網站了(owo
我是Ting，謝謝28天來的觀看，本系列最後兩天也敬請期待！
iThome鐵人賽
看影片追技術