介紹完如何製作響應式網站後，當然也會想說有沒有更快速的框架可以使用，所以今天就要來介紹目前最多人使用的Tailwind及Bootstrap

什麼是Tailwind CSS?

Tailwind CSS 最初由Adam Wathan 開發，於2017 年11 月1 日首次發布。他是一個功能優先的框架，提供超超多單一功能的class名稱，像是文字大小、字型、背景色、框線等想得到的樣式，使用上自由程度高，讓我們能夠客製化任何元件，快速刻板。

優點

CSS Utility

提供多種不同的Utility，運用各種不同的 Utility 拼成想要的樣子。
就像樂高積木一樣，只需要將積木的零件，拼成你想要的樣子。

不用為了命名 CSS 煩惱

在撰寫的時候，有時候會為了命名共用樣式的名稱或是class名稱所困擾。

一個輕量級的CSS框架

會依照使用者使用的Utility，包裝成檔案，沒有使用到的就不會在裡頭，減少讀取的負擔

缺點

HTML看起來很凌亂，一大串的class名稱

<div class="font-sans font-bold text-3xl text-center text-indigo-600"> ... </div>

配置門檻高，適合有經驗的人

如果想直接使用CDN，他功能沒有這麼完善，且官網也不建議使用此方法。所以就要用PostCSS插件的方式來安裝 Tailwind CSS，官網列出使用CDN需要注意事項

詳細安裝說明可以到Tailwind CSS官方查看詳細安裝步驟

在VS Code上寫Tailwind時也有很好的插件輔助

什麼是Bootstrap?

Bootstrap 於2010 年年中作為Twitter 內部設計工具的一個分支啟動，並於2011 年8 月19 日成為開源框架。他已經有預先設置好基本樣式，不需要重頭自己自訂樣式，只要複製code就就可以了，像是表格、按鈕、表單、麵包屑等元件。

優點

組件類型CSS框架

提供很多不同類型的組件，可以快速的切出網頁及元件樣式。

不需要引入大量的 jQuery套件

bootstrap裡面有很多常用的組件，就不需要引入各種不同的jQuery套件，也不用套件之間會有衝突

缺點

檔案很大

不管你有沒有使用到元件，他就是完整的樣式檔案，如果需要制定樣式，就需要覆蓋默認的屬性，導致大量無效樣式加載

元件都樣式都長得差不多，客製化門檻高

直接套用Bootstrap元件，如果都不修改的話，每個網站的樣式看起來就都會一樣，甚至一看畫面就會知道是套用Bootstrap

結論

tailwind自由度高，可以完全客製化，但是HTML會滿滿的code，看起來會很凌亂；Bootstrap有現成的組件，在製作後台或是不需要美化的網站，可以快速開發，且很容易上手。因此tailwind與Bootstrap各有優缺點，要使用什麼框架還是要依需求和偏好來做選擇。