看到許多 Tailwind CSS 跟 Bootstrap 框架的比較，但是卻沒有一個全面的整理？
像是面對湖中女神一樣，你對於「要選擇的是左邊的 Tailwind CSS，還是右邊的 Bootstrap」毫無頭緒嗎？

就讓這篇文章整理這兩個架構的優缺點，以及適合運用的專案類型，讓你輕鬆回答湖中女神的問題！

Tailwind CSS的優點

1. Utility 類型的 CSS 框架

把所有常用的 CSS 都包裝成各式各樣的 Utility，使用者所需要做的就是組合這些 Utility。Tailwind CSS 提供各種不同的 Utility，你可運用各種不同的 Utility 拼成你想要的樣子；就像是拼樂高的積木一樣，不需要自己從零開始一一製作樂高積木的形狀與零件，只需要想著如何把它們組合成高樓大廈！

2. 不用再為了命名 CSS 煩惱

許多人在撰寫程式的時候，會遇到共用及名稱的問題。然而若是選擇 Tailwind CSS 框架，不會因為要將一個 CSS 用在不同的地方，就需要不斷複製 CSS，只為了有不同的名稱，因為 Tailwind CSS 本身就提供許多的 Class 包裝名稱，可以避免這些麻煩的步驟。

3. 輕量的 CSS 檔案

由於官方配置可以讓 CSS 檔案變小，依照使用者所使用的 Utility ，將其中的 CSS 包裝成檔案，沒有使用到的就不會在裡頭，達到精簡輕量！

4. V2.1 版本 Just-in-time 模式

方便客製化樣式，在舊版本中，假設使用者要改寬度的 Pixel ，要先去設定寬度 Pixel 的名字、自定義 Utility。但在此模式中，就不需要多配置，直接在 HTML 寫要怎麼樣的客製化設定就可以了！

Bootstrap的優點

1. 組件類型 CSS 框架

有提供很多不同類型的組件，可以快速地寫出網頁、 Web app 及 UI 樣式。Bootstrap 就像是你買了一組鋼彈的模型，整組好好的你可以快速的得到完整的鋼彈，但你可能只能小小的改動一下零組件，也就是下一個會提到的優點！

2. Utility 可以用來微調 CSS

假設今天有一個陰影的樣式，樣式包裝成一個 class ，只要調用 Class 名稱及可套用效果，就可以得到自己想要的效果。這樣的設定可以節省再去撰寫 CSS 的時間！

3. 脫離 jQuery

網頁中原本有許多組件都是依靠 jQuery，Bootstrap 不需要 jQuery，在載入的時候就可以減少負擔，對網頁載入效能有所提升！

Tailwind CSS的缺點

1. 配置門檻高

Tailwind CSS 各種配置方式眼花撩亂，雖然有很多方法可以進行配置，但是相對要多花時間來學習。

2. CDN 引入功能不齊全

若要直接引入 CDN 功能使用，在 Tailwind CSS 這樣功能相對不完善，因此需要搭配其他處理，例如：Webpack、Postcss 等。

Bootstrap的缺點

1. 客製化門檻高

Bootstrap 在客製化的時候，因為需要學習 sass，因此門檻較高。

2. 專案的維護成本較高

不論是 sass 的新手或是老手，為了要客製化將 sass 導入，勢必會提高專案的維護成本，比較麻煩。

Bootstrap 與 Tailwind CSS 的比較總結

優缺點都看完了，那麼這兩個框架究竟適合怎麼樣的情況呢？

Tailwind CSS – 解決開發 CSS 的麻煩與時間

自由度較高，針對客製化較有優勢，又解決了 CSS 開發常見的問題與困難。

Bootstrap – 追求快速開發適用

客製化較有局限，但因有很多現成的組件，可以快速、高效率的開發。

這樣子的比較你有辦法選擇了嗎？你想要的是左邊的 Tailwind CSS，還是右邊的 Bootstra 呢？或是小朋友才選擇，大人全都要！
歡迎把你的想法留言在底下喔！

文字看得不過癮？也可以點這邊看布魯斯老師的影片解說喔！