<center><img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhh56bp2p4umdkm2xn8nx.png" /></center>

前言
---
剛剛我們看了 Tailwind CSS，它給了我們「工具」，讓我們像拼樂高一樣，可以 100% 客製化我們的畫面。

但請大家想一個情境：**如果我今天要做的是一個「後台管理系統」呢？**

我需要的功能可能有：

* 複雜的表格 (Data Table)，包含排序、篩選、分頁。
* 日期選擇器 (Date Picker)，還要能選範圍。
* 彈出式視窗 (Modal)。
* 下拉式選單 (Select)，還要能搜尋。
* 上傳元件 (Upload)。

如果這些都要用 Tailwind 一個一個從頭刻，會發生什麼事？

1. **超級花時間：** 光是日期選擇器，你就可能要寫好幾天，還要處理一堆 JavaScript 邏輯。
2. **設計很難：** 這些複雜元件的樣式和互動細節非常多，自己設計很容易漏東漏西。
3. **功能會少：** 你可能很難自己做出「鍵盤操作」或「無障礙 (a11y)」支援。

**這就是 UI 庫 (UI Library) 登場的時候了。**

如果說 Tailwind 是給你「樂高積木」，UI 庫就是給你「**已經組裝好的樂高模型**」。

你不用自己拼一台車，你直接拿到一台「功能完整、外觀漂亮」的車子模型，你只要直接使用它就好。

我們這次使用的 UI 庫叫做 **Chakra UI**

Tailwind CSS v.s. UI 庫
---
| **特性** | **Tailwind CSS (Utility-First)** | **UI 庫 (e.g., MUI, AntD)** |
| --- | --- | --- |
| **提供什麼** | CSS 工具 class (積木) | 完整的 React/Vue 元件 (模型) |
| **開發速度** | 慢 (從 0 打造) | **快** (直接使用現成元件) |
| **客製化程度** | **極高** (100% 自由) | 低 (受限於元件設計) |
| **設計風格** | 完全自訂 | 統一，但容易 "撞衫" |
| **包含邏輯** | 否 (只有樣式) | **是** (JS 互動邏輯都包了) |
| **適合情境** | 品牌官網、行銷頁、作品集<br><br> <br><br>(需要高度客製化設計) | **後台管理系統**、儀表板、MVP<br><br> <br><br>(需要快速交付功能) |

核心概念 - 元件驅動
---
使用 UI 庫去寫網頁就像是 **「使用一些組裝好的樂高模型去搭建好一個場景一樣」**

* **引入 Button 的範例：**

import { Button } from "@chakra-ui/react"

const Demo = () => {
  return <Button>Button</Button>
}


* **優點：** 程式碼很簡單，程式碼更組件化
* **缺點：** 客製化程度相較於 Tailwind 來說更少。
* **API：** <code>colorPalette</code>、<code>size</code>、<code>variant</code>...

---

UI 庫官網： https://chakra-ui.com/