哪一個更好？Bootstrap還是Tailwindcss？什麼時候使用它們，為什我們不直接使用css，而要選擇一個框架來使用css。

css

也許您從未聽說過tailwindcss，或者你也沒有聽過bootstrap，不過這些都沒有關係，接下來我會介紹下它們，並告訴您如何選擇它們，如何使用它們。

什麼是Tailwindcss，為什麼要使用它

簡而言之，Tailwindcss是一個幫您預定了很多類的css檔案集合它包含很多經常使用的CSS樣式，例如陰影，下劃線，填充，邊距，邊框等，這意味著您大多數時間都不需要編寫CSS，因為它已經為您預定義了。您所需要做的就是在你的html程式碼結構上新增已經在tailwindcss檔案中定義好的類就行。

<h1 class="text-4xl border-b border-red-400">世界您好！</ h1>

在上面的示例中，text-4xl將字型大小設定為2.25rem，border-b將在邊框底部新增1px的寬度，border-red-400將在邊框顏色設定為RGBA（248，113，113）。這通常就是使用tailwindcss的方法。

tailwind

tailwindcss最優秀的特點就是它是可定製的，你可以選擇生成僅包含你經常使用的特定類的CSS檔案，你可以定義自己喜歡的動畫，這樣就不必一遍又一遍地重新定義它。

需要注意的是tailwindcss的所有配置都是在JavaScript中定義的，你可以非常方便地修改它們，此外，需要注意的事，如果要使用tailwindcss，你需要一個構建工具，可以是webpack或者是glup這些工具。

什麼是Bootstrap，為什麼要使用它

同樣，bootstrap非常類似於tailwindcss。但是bootstrap的構建是為了提供可立即使用的UI元件（例如表單等），因此，您無需使用便從頭建立元件，而只需使用bootstrap，搜尋所需的元件，複製程式碼即可，就可以保證bootstrap將提供功能全面的元件，響應迅速並與所有瀏覽器相容。

bootstrap

Bootstrap是由Twitter上的人們構建的，它具有龐大的社群，因此，如果您找不到所需的元件，或者想新增其網站中未包含的某些功能，那麼你可以找到很多人幫助，因為bootstrap有著很廣泛的社群。

使用bootstrap的方法很簡單，你只需要在網頁程式碼中引入所需要的css和js檔案即可，然後你就可以呼叫它提供好的元件和樣式。

bootstrap最引以為傲的是它的網格系統，你可以輕鬆地透過樣式來佈局頁面，並且你也可以非常容易地寫出響應式頁面。

雖然bootstrap有著多出色的優點，但是當你想要更多地自定義樣式的時候，很多的時候它會和bootstrap的預設樣式衝突，不過這種問題在bootstrap5中已經改進了不少。

結論

相比較bootstrap，tailwindcss似乎使用起來稍顯複雜一些，不過，當你熟悉了它的使用方式之後，你會發現自定義的構建元件是多麼的方便。

如果你的網站自主設計不多，或者你想快速開發一個響應式網站，那麼我推薦你使用bootstrap5，但是如果你想要更加精細地佈局和設計你的網頁，那麼tailwind2將會是你最佳的選擇。