在某些情況下，Tailwind css 比 Bootstrap 更好，因為它是一個低級 CSS 框架，可讓您根據(jù)需要構(gòu)建自己的自定義組件。如果使用得當(dāng)，它非常注重性能，可以顯著減少 CSS 負載并確保更快的渲染。如果 Web 性能和自定義是您的首要任務(wù)，請選擇 Tailwind。

原因 1：Tailwind CSS 生成的 CSS 有效負載明顯較小。

如果與 NextJS 和類似框架一起使用，Tailwind 將生成顯著較低的 css 占用空間。例如，NextJS 能夠查看您的標(biāo)記并自動找出哪些 css 類需要與最終的 css 有效負載捆綁在一起。

Bootstrap以這種方式配置要復(fù)雜得多。

原因 2：Tailwind CSS 是一個低級的 CSS 框架，因此更適合定制。

把Tailwind?想象成一個裝滿樂高積木的袋子。

你可以用這些積木制作任何你想要的東西。

Bootstrap 更像是宜家組件，層次更高，提供的定制功能有限。

例如，Tailwind 的 CSS 沒有為按鈕提供任何類別；

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> My Buton

Bootstrap 會為按鈕提供默認 CSS。

<button class="btn btn-primary"> My Buton

正如您所注意到的，Tailwind 為您提供了許多低級實用類來實現(xiàn)您的愿望，而 Bootstrap 則有一套固定的按鈕類。

對于 Tailwind 來說，你通常會寫出類似下面這樣的內(nèi)容：

.btn { ? ? @apply font-bold py-2 px-4 rounded; ? } ? .btn-blue { ? ? @apply bg-blue-500 text-white; ? } ? .btn-blue:hover { ? ? @apply bg-blue-700; ? }

原因 3：Tailwind 是 NextJS 等前端框架的默認選擇。

NextJs 是時下非常流行的前端框架，它推廣 Tailwind css 而不是 Bootstrap。該框架的幾乎所有默認模板都是使用 Tailwind 設(shè)計的。

如果你想建立一個新網(wǎng)站，你很可能最終會使用 Nextjs 和 Tailwind。

原因 4：Tailwind 擁有一個活躍的社區(qū)，而 Bootstrap 是由一家正在經(jīng)歷復(fù)雜收購的公司運營的。

由于埃隆-馬斯克收購了 Twitter，Bootstrap 的未來可能會像雅虎 UI 等早已被遺忘的框架一樣前途未卜。雖然 Bootstrap 是開源的，即使 Twitter 放棄了對它的支持，該框架仍有可能得到世界各國的維護，但這可能會讓它的未來變得坎坷不平。然而，盡管 Tailwind 得到了一家小公司的支持，但它的地位太低，不會受到公司命運變化的影響。建立在 Tailwind 上的企業(yè)完全有能力維護它。

原因 5：Tailwind 在 NPM 趨勢上已經(jīng)超過了 Bootstrap

如果我們根據(jù) NPM 的趨勢來看，tailwind 的受歡迎程度已經(jīng)超過了 Bootstrap。這是 Tailwind 的一大成就，因為 Bootstrap 的歷史要長得多，產(chǎn)品也成熟得多。

理由 6：Tailwind 的細粒度控制可讓您的用戶界面脫穎而出

與 Bootstrap 的組件相比，Tailwind 能讓你更好地控制設(shè)計的細節(jié)，如邊框、陰影、明暗控制、透明度等。修改 Bootstrap 按鈕要比使用 Tailwind 制作您想要的按鈕難得多。

如果您的 UI 設(shè)計師真的喜歡讓自己的設(shè)計獨一無二，而不是 "庫存"，那么 Tailwind 可能是您需要的工具，而不是 Bootstrap。

例如，Tailwind 不會自帶按鈕、折疊式、警報等用戶界面組件。您必須自己構(gòu)建所有這些組件，或者使用像 Flowbite 這樣構(gòu)建在 Tailwind 之上的更高級別的庫。雖然這對于快速構(gòu)建應(yīng)用程序的人來說似乎是個缺點，但對于具有一定規(guī)模的大公司來說，由于他們的需求更加具體，因此最終必然會這樣做。

理由 7：Tailwind 在Web生命周期評分上的表現(xiàn)比 Bootstrap 好得多

眾所周知，一個網(wǎng)站如果在 Web Vitals 分數(shù)上表現(xiàn)出色，那么它在搜索引擎優(yōu)化方面的表現(xiàn)也會更好。用戶體驗也會更好。如果您使用類似燈塔lighthouse的工具來衡量這兩種框架的網(wǎng)頁性能，Tailwind CSS 通常在開箱即用的情況下表現(xiàn)更好。不過，我們必須注意到，只要使用得當(dāng)，Bootstrap 也同樣會有更好的表現(xiàn)。

與 Bootstrap 相比，Tailwind CSS 有很多優(yōu)勢。不過，工具是否適合工作，最終還是取決于工作和工具本身。如果您正在構(gòu)建一個性能和自定義比開發(fā)速度更重要的應(yīng)用程序，我認為 Tailwind 會比 Bootstrap 做得更好。但是，如果您正在尋找現(xiàn)成的全站組件或由第三方構(gòu)建的主題，那么 Tailwind 可能不是您的正確選擇。

[原文：https://www.jdon.com/67579.html](URL Here)文章來源地址http://www.zghlxwxcb.cn/news/detail-628587.html

到了這里，關(guān)于Tailwind css優(yōu)于Bootstrap 7個原因的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！