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 没有为按钮提供任何类别；

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

Bootstrap 会为按钮提供默认 CSS。

<!-- This is a blue button -->
<button class="btn btn-primary"> My Buton </button>

正如您所注意到的，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 可能不是您的正确选择。