看到許多 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 導入，勢必會提高專案的維護成本，比較麻煩。

總結

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

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

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

Bootstrap – 追求快速開發適用

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

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

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

Hi 找我嗎？追蹤訂閱HiSKIO

• HiSKIO 嗨程式技能： 科技資訊文章、實用工具分享、新課程優惠領取
• Codefree：喝一杯咖啡，輕鬆學程式！
• HiSKIO LINE：叮咚！掌握最新資訊與優惠，現在就到 LINE 領200抵用券！
• HiSKIO YouTube：免費實用課程、工程師經驗分享
• 程式丼起來：不想一個人孤單寫 code ? 立即加入話題圈吧 !