# Tailwind CSS

###### tags: `CSS` `tailwindcss`

官網：https://tailwindcss.com/
https://tailwindcss.com/docs/container
components：https://tailwindcomponents.com/
online：https://play.tailwindcss.com/
Built with Tailwind：https://builtwithtailwind.com/

## 開端

今天要為各位介紹的是 Tailwind CSS
我已經看到他一陣子了，決定要來會會他了(握拳)

## Tailwind CSS是CSS框架

>跟我們現在用的vuetify跟bootstrap有什麼不一樣?

Tailwind 是 Utility Framework
Bootstrap 是 UI Framework

Tailwind　比較　可以客製化
Bootstrap　相對　比較不行

| | Tailwind| Bootstrap |
| -------- | -------- | -------- |
| Framework | Utility Framework | UI Framework |
|壓縮後的檔案大小 | ★★★ | ★★★ |
| 客製化程度 | ★★★★ | ★★★ |
| 上手難易度 | ★★★★ | ★★ |
| 適用人群 | 1.想高度客製版面 <br> 2.有經驗的開發人員| 1.想快速套用主題版面 <br>2.適合初學者入門 |

>Utility Framework V.S UI Framework

Tailwind 跟其他的CSS Framework 不一樣， , 而其他的 (Bootstrap, Bulma) 都是 UI Framework. 所以Tailwind 可以更客製化的，不會受到Framework 本身的style影響。也就是說它並不像其它 CSS 框架有多種的 UI 元件，而是提供各種好用的 class 工具來滿足各種介面情境。

## 優點

對於大家都很像的網頁，你可以跟別人不一樣：）

對於GY的客戶要求，或是自己人GY的要求，結果是對自己GY的要求
可能使用他會覺得可以解決，用其他framework會改的比較痛苦

## 缺點

- 因為可以客製化，html code會落落長，看了會很痛苦

> 你也可以使用 @apply 把它包起來
> https://play.tailwindcss.com/c8hyaUrbP9

＃　這是使用 bootstrap 的 btn
<button type="button" class="btn btn-primary">Primary</button>

＃　這是使用 Tailwind CSS 人家刻好的 btn
<div class="inline-block mr-2 mt-2">
    <button 
        type="button" 
        class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
    >
        Primary
    </button>
</div>

- 有時程壓力，比較不適合

## 使用與不使用

看你自己！！！

如果你需要大量的客製化，用他
對CSS有狂熱者會手癢，用他

需要快速建置網頁會使用的很痛苦
美感沒那麼要求的話用原本的UI Framework應該就很夠用了

## Appendix and FAQ

:::info
- [淺談 Tailwind CSS](https://medium.com/@hayato.chang/%E6%B7%BA%E8%AB%87-tailwind-css-4153d86eb661)
:::

## 工作延伸
vue 3 + Tailwind CSS

https://tailwindcss.com/docs/guides/vue-3-vite