在前面的 25 天裡，我們從純手刻 HTML 骨架、用 CSS 慢慢調邊距、寫 Box Model，一路走到寫 JavaScript 互動與串接 API。

雖然我們已經能做出功能完整的網頁了，但你有沒有發現：每次要刻一個簡單的按鈕，都要重複寫 padding、background-color、border-radius，其實有點繁瑣又花時間？

這時候，我們就需要請出前端開發的神兵利器——CSS 框架（CSS Frameworks），其中又以當前最紅的 Tailwind CSS 最受設計師歡迎！

什麼是 CSS 框架？就像是工程界的「UI Kit / 設計系統」

在設計的世界裡，如果每次畫網頁都要從「畫一個 4px 的圓角、挑一個灰色陰影」開始，專案早就延期了。所以我們會有 Design System（設計系統） 或現成的 UI Kit，裡面已經規定好了色彩規範（Colors）、間距尺寸（Spacing Tokens）與元件樣式。

在前端，CSS 框架就是扮演這個角色：

• 傳統寫法： 自己開一個 .css 檔案，手動幫每個標籤慢慢刻屬性。
• 框架寫法（以 Tailwind CSS 為例）： 它把所有常見的樣式都變成了一組一組的「原子化類別（Utility Classes）」，你只要直接在 HTML 標籤上寫代碼，就能組合出精美的介面！

Tailwind CSS 長什麼樣子？（直覺的代碼拼貼）

比起傳統 CSS 要額外開檔案寫選擇器，Tailwind CSS 是直接把屬性寫在 HTML 的 class 裡面。這對設計師來說，直覺程度簡直破表：

<!-- 用 Tailwind CSS 快速刻出一張精美的質感卡片 -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg p-6 space-y-4">
    <!-- 標題 -->
    <h2 class="text-xl font-bold text-gray-800">前端轉職日記</h2>
    
    <!-- 內文 -->
    <p class="text-gray-600 text-sm">
        這是一個用 Tailwind CSS 快速排版出來的卡片，完全不需要另外開 CSS 檔案！
    </p>

    <!-- 按鈕 -->
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition">
        點擊體驗
    </button>
</div>

把這幾個常用的類別對照一下，是不是跟你在 Figma 右側面板看到的屬性幾乎一模一樣？

• bg-white = 背景白色 (Background)
• rounded-xl = 大圓角 (Border Radius)
• shadow-lg = 大陰影 (Drop Shadow)
• p-6 = 內距 Padding (Spacing Token)
• text-blue-500 = 文字顏色

為什麼設計師會愛死 Tailwind？

1. 不用再為「幫 CSS 命名」而痛苦： 寫傳統 CSS 最煩惱的就是要想 class 要叫 .card-box-new 還是 .box-container。Tailwind 直接用現成的縮寫，省去想名字的時間。
2. 視覺風格高度一致： 因為它的間距（p-4、p-6）和色彩（gray-100 到 gray-900）都是系統化設定好的，隨便怎麼拼湊出來的畫面都有一定的設計質感，不容易走鐘！

今日小結

今天我們認識了 CSS 框架的概念，並體驗了像 Figma UI Kit 一樣好用的 Tailwind CSS，發現原來刻版可以這麼快狠準！

隨著 30 天挑戰進入最後尾聲，明天我們要來聊聊：當我們辛苦寫好網頁後，要怎麼把它免費放到網路上讓全世界都看得到——部署與發布（Deployment）！