---
# System prepended metadata

title: 'Tailwind CSS, Tailwind UI'
tags: [UI library, Tailwind/Bootstrap]

---

# Tailwind CSS, Tailwind UI
###### tags: `Tailwind/Bootstrap` `UI library`

## [Tailwind CSS](https://tailwindcss.com/) 是什麼？

### 官網範例 code 

![](https://i.imgur.com/aglTcIb.png)

<br >

### 官網介紹
>A **utility-first CSS framework** packed with classes like `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your **markup**.


<br >

### Markup => Design

- 直接在 HTML 裡下 class ( 或是 JSX 的 className )，就可以做出 style，節省寫 CSS 的時間

- 官網範例

    - target design layout
    
        <img src="https://i.imgur.com/Poq3FxR.png" width="400px">
        

    - 手刻 CSS 寫法
    
        ![](https://i.imgur.com/32ud9y3.png)

        
    - 導入 Tailwind CSS 的寫法
    
        ![](https://i.imgur.com/eNVqDUd.png)

<br >

### **Utility-First**

- 與其他例如 [Bootstrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/), [Materialize](https://materializecss.com/), [Semantic UI](https://semantic-ui.com/) 不同，並不是以「元件」（predefined component 像是 navbar 或 button ）為出發點去做設計的
    
- 提供 a huge set of utilities（也就是先定義好的 class 與對應的 CSS style 設定），讓 developer 自己建立 custom 的元件 
    （當然 Bootstrap 等等也可以透過配置 SCSS 來做到 customize，只是 Tailwind 這套 framework 的出發點相對 lower-level，更容易去達成這件事）
    
- 因此，使用 Tailwind CSS 不會看起來特別有 Tailwind 的視覺風格（像用 Bootstrap 做的很容易被看出來很 “Bootstrapy”）

<br >

### 使用心得與專案實例分享

- **強大的搜尋功能**，完全不用記 class 名稱，要什麼 style 馬上查，直接下 class

    ![](https://i.imgur.com/rjjPHAX.png)
    
    ![](https://i.imgur.com/aN0aznr.png)

- 預設色盤顏色較現代，擴充色盤齊全
    - 基本：[Background Color](https://tailwindcss.com/docs/background-color)
    - 擴充：[Customizing Colors](https://tailwindcss.com/docs/customizing-colors)

- 容易客製化自己的 color pallete

- 真的太細的設定，還是自己下 CSS 最能客製化 

<br >

### 基本、常用 class 名稱

| class 關鍵字             | meaning                            | example                                              |
| ------------------------ | ---------------------------------- | ---------------------------------------------------- |
| p                        | padding                            | `p-2`                                                |
| m                        | margin                             | `m-4`                                                |
| t, b, l, r, x, y         | top, bottom, left, right, x向, y向 | `py-4`, `mb-6`, `mx-auto`                            |
| 特性-數字                | 尺寸                               | `border-t-2`, `w-80`                                 |
| w, h                     | width, height                      | `w-3/4`, `h-2`, `w-full`, `h-screen`                                   |
| 顏色-數字                | 指定顏色與色階                     | `border-gray-300`                                    |
| bg                       | background                         | `bg-blue-500`                                        |
| border                   | border style                       | `border`,`border-b-2`                                |
| text                     | text style                         | `text-white`,                                        |
| tracking                 | letter spacing                     | `tracking-wide`, `tracking-wider`, `tracking-widest` |
| leading                  | line-height                        | `leading-2`, `lading-loose`                          |
| *as properties*          | position                           | `fixed`, `absolute`, `relative`, `static`            |
| *as properties*          | display box type                   | `block`, `inline-block`, `inline`, `flex`, `hidden`  |
| justify-propertyName     | flex, grid main axis               | `justify-center`, `justify-between`, `justify-end`   |
| items-propertyName       | flex, grid cross axis              | `items-center`, `items-end`, `items-stretch`         |
| hover:, focus:, active: | 狀態的 style 指定                  | `hover:bg-purple-700`, `focus:ring-2`                |
| sm:, md:, lg:, xl:, 2xl:    | responsive   | `w-16 md:w-32 lg:w-48` |
                                               

:::warning
class 名稱要完全下對，只要與 Tailwind CSS 文件不同就完全沒有作用
:::

<br >

### 使用 config 設定
- 範例：LinkInterior 主題色與擴充色設定: [`tailwind.config.js`](https://github.com/wei-yiting/LinkInterior/blob/main/tailwind.config.js)

- 常見設定：media query 的斷點

<br>

### :boom: News
#### [Tailwind CSS v3.0.0-alpha.1 ](https://github.com/tailwindlabs/tailwindcss/releases) 於 2021/10/01 發佈
(尚未研究 What's new，但總之就是越來越強大了)

***

## Tailwind UI 與其他 UI library

### 什麼是 UI Library?
:::info
### A UI component library is a (usually) robust set of **ready-made UI components** 
- ex: buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. 
- Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects. 
- **Each library has a distinctive look and feel**, but most of them offer theming, and their components are **customizable to a certain degree**.
:::

<br >

### UI Library 的優點

- **開發速度**
    
    不用每個 component 都從頭手刻，即使需要額外的調整細節符合設計需求，但還是比自己從頭寫 style 和互動功能還快

- **容易使用**

    好的 UI Library 通常有完整、好 follow 的文件，很多時候我們只要將 code snippet 複製貼上，就可以有基本的功能了

- **外觀好看、具一致性**
 
    Developer 不需要花太多力氣就可以打造出高度一致性視覺設計出色的 layout 

- **Compatibility**
 
    UI Library 中提供的的 components 都已經幫忙處理了跨瀏覽器與跨裝置的問題，對前端開發輕鬆很多

- **Accessibility**
    
    好的 UI Library 會遵守  accessibility guidelines，Developer 不用在顧慮這部分

<br >

### 受歡迎的 UI Library 列舉

:arrow_right: [Top 9 UI libraries and kits for React 2021](https://blog.logrocket.com/top-9-ui-libraries-kits-react/)


#### [Material-UI](https://mui.com/)

![](https://i.imgur.com/Ou03pQZ.png)


<br >

#### [React Bootstrap](https://react-bootstrap.github.io/)

![](https://i.imgur.com/Nt2auGV.png)

<br >

#### [Ant Design](https://ant.design/docs/react/introduce)

![](https://i.imgur.com/JUunyJG.png)

<br >

### [Tailwind UI](https://tailwindui.com/)
#### 官方介紹
> ### Beautiful UI components, crafted with Tailwind CSS
> Over 400+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.
> 適用於 HTML, React, Vue

![](https://i.imgur.com/xX2m5Q6.png)


<br >

#### 專案經驗分享

- 當初為何選擇 Tailwind UI?

    *因為跟我的 wireframe 和整體視覺比較符合，需要自己調整的地方較少*

- [LinkInteior](https://linkinterior.com.tw/) 專案使用了哪些 ？

    *Dropdown，input field，toggle Switch, Navbar, Breadcrumb, log-in/sign up page*

- 心得整理
    - 優點

        - 跟 Tailwind CSS 可以合併一起使用，theme color 很好處理
        - 視覺符合我的需求
        
    - 缺點
    
        - UI Library 的 React component 相較於其他 UI Library 還沒有非常成熟
        - style 沒有辦法更動太多
        - Navbar 使用兩組 component 造成爆版，不好掌握


<br >

***
### 參考資料

[Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME&t=610s)


[When to use a UI component library in a React project?](https://sunscrapers.com/blog/when-to-use-a-ui-component-library-in-a-react-project/)

