Tailwind css优于Bootstrap 7个原因

在某些情况下,Tailwind css 比 Bootstrap 更好,因为它是一个低级 CSS 框架,可让您根据需要构建自己的自定义组件。如果使用得当,它非常注重性能,可以显着减少 CSS 负载并确保更快的渲染。如果 Web 性能和自定义是您的首要任务,请选择 Tailwind。

原因 1:Tailwind CSS 生成的 CSS 有效负载明显较小。

如果与 NextJS 和类似框架一起使用,Tailwind 将生成显着较低的 css 占用空间。例如,NextJS 能够查看您的标记并自动找出哪些 css 类需要与最终的 css 有效负载捆绑在一起。

Bootstrap以这种方式配置要复杂得多。

原因 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 为您提供了许多低级实用类来实现您的愿望,而 Bootstrap 则有一套固定的按钮类。

对于 Tailwind 来说,你通常会写出类似下面这样的内容:

.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 设计的。

如果你想建立一个新网站,你很可能最终会使用 Nextjs 和 Tailwind。

原因 4:Tailwind 拥有一个活跃的社区,而 Bootstrap 是由一家正在经历复杂收购的公司运营的。

由于埃隆-马斯克收购了 Twitter,Bootstrap 的未来可能会像雅虎 UI 等早已被遗忘的框架一样前途未卜。虽然 Bootstrap 是开源的,即使 Twitter 放弃了对它的支持,该框架仍有可能得到世界各国的维护,但这可能会让它的未来变得坎坷不平。然而,尽管 Tailwind 得到了一家小公司的支持,但它的地位太低,不会受到公司命运变化的影响。建立在 Tailwind 上的企业完全有能力维护它。

原因 5:Tailwind 在 NPM 趋势上已经超过了 Bootstrap

如果我们根据 NPM 的趋势来看,tailwind 的受欢迎程度已经超过了 Bootstrap。这是 Tailwind 的一大成就,因为 Bootstrap 的历史要长得多,产品也成熟得多。

理由 6:Tailwind 的细粒度控制可让您的用户界面脱颖而出

与 Bootstrap 的组件相比,Tailwind 能让你更好地控制设计的细节,如边框、阴影、明暗控制、透明度等。修改 Bootstrap 按钮要比使用 Tailwind 制作您想要的按钮难得多。

如果您的 UI 设计师真的喜欢让自己的设计独一无二,而不是 "库存",那么 Tailwind 可能是您需要的工具,而不是 Bootstrap。

例如,Tailwind 不会自带按钮、折叠式、警报等用户界面组件。您必须自己构建所有这些组件,或者使用像 Flowbite 这样构建在 Tailwind 之上的更高级别的库。虽然这对于快速构建应用程序的人来说似乎是个缺点,但对于具有一定规模的大公司来说,由于他们的需求更加具体,因此最终必然会这样做。

理由 7:Tailwind 在Web生命周期评分上的表现比 Bootstrap 好得多

众所周知,一个网站如果在 Web Vitals 分数上表现出色,那么它在搜索引擎优化方面的表现也会更好。用户体验也会更好。如果您使用类似灯塔lighthouse的工具来衡量这两种框架的网页性能,Tailwind CSS 通常在开箱即用的情况下表现更好。不过,我们必须注意到,只要使用得当,Bootstrap 也同样会有更好的表现。

与 Bootstrap 相比,Tailwind CSS 有很多优势。不过,工具是否适合工作,最终还是取决于工作和工具本身。如果您正在构建一个性能和自定义比开发速度更重要的应用程序,我认为 Tailwind 会比 Bootstrap 做得更好。但是,如果您正在寻找现成的全站组件或由第三方构建的主题,那么 Tailwind 可能不是您的正确选择。

[原文:https://www.jdon.com/67579.html](URL Here)

相关推荐
I_Am_Me_7 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ17 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z23 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5