我用 Tailwind CSS 重做了一个 Bootstrap 网站，以下是区别。

本文最初发表于我的个人博客。

每个网页开发者都从Bootstrap开始。它易于使用，能节省大量网站创建时间。无论新手还是资深开发者，Bootstrap 都是他们不可或缺的工具。

不过，最近我经常听到有人提到Tailwind CSS。我在 Twitter 和一些文章里不断看到人们谈论它，这让我很好奇，想亲自尝试一下。

所以我决定重做我维护的开源项目sButtons的网站。最初，它只用 HTML 和 Bootstrap 构建。它最初的样子是这样的：

我之所以选择重构它，实际上是因为它最初只是用 HTML 编写的，随着项目规模的扩大，维护所有组件变得越来越困难。由于让这些组件可复用更容易，我决定用 React 重建它，并赋予它全新的外观。

虽然第一个设计很棒，但我还是想尝试一些更扁平化、更简洁、更易于操作的设计。

使用 React 和 Tailwind CSS 构建完成后，新网站如下：

一个更简洁的网站，传达了“简洁按钮”背后的理念。

尽管设计发生了巨大变化，但这并非我在此要比较的重点。我将比较的是我使用 Bootstrap 和 Tailwind CSS 的体验，以及哪一个更好。

它们并不相同

尽管 Tailwind CSS 和 Bootstrap 的用途可能相似，但它们并不相同。Tailwind CSS 更侧重于提供易于使用的实用类，以节省您的时间。正如其文档所述：“无需再sidebar-inner-wrapper为了设置样式而添加莫名其妙的类名。”它还鼓励使用这些实用类创建可重用的组件。

Bootstrap 也提供了易于使用的实用类，但从早期版本开始，Bootstrap 就专注于通过提供预先设计好的通用 UI 元素来帮助您快速创建网站。只需复制粘贴代码，即可在您的网站上获得导航栏。

适应变化

我刚开始尝试 Tailwind CSS 时，遇到了一些困难，因为我以前习惯于直接使用 Bootstrap 提供的现成组件，然后根据需要进行修改。而使用 Tailwind CSS，我必须自己创建这些组件，起初我以为这会花费我更多的时间和精力。

然而，随着我不断学习和掌握，它变得越来越容易。我的思维方式完全转变为“Tailwind CSS”的思维模式，构建组件也变得更加轻松。我不再需要依赖复制粘贴代码。Tailwind CSS 提供的实用类可以帮助你理解组件的创建和样式设置方式，而且无需实际编写 CSS 代码。

我已经非常习惯使用 Tailwind CSS 提供的类，以至于即使在处理其他项目时，我的第一反应也是使用它们。

轻松实现响应式设计和深色模式

在 Tailwind CSS 的众多可用类中，您可以根据目标屏幕尺寸为任何规则或类添加前缀，从而轻松使其符合响应式设计。

例如，如果我想让一个元素在所有屏幕上的宽度为 50%，但在小屏幕上的宽度为 100%，我可以像这样轻松实现：

<span class="md:w-6/12 w-full">I'm responsive!</span>

无需再为媒体查询而烦恼！您几乎可以为 Tailwind CSS 提供的所有实用类添加 md:、sm: 等前缀。

Bootstrap 为一些实用类提供了这种功能，但是，我认为它不够灵活，最终你还是需要编写自己的媒体查询。

接下来是深色模式。深色模式现在几乎是所有网站的必备功能。但要让你的网站兼容深色模式可能比较麻烦。这还取决于你如何构建网站组件。

Tailwind CSS 提供了一种简单易用的解决方案，让您的网站兼容深色模式。只需在设置元素样式时添加前缀 `dark:`，即可添加仅在启用深色模式时生效的样式。

例如：

<div class="bg-white dark:bg-gray-700"></div>

添加到 div 元素的类确保默认情况下背景色为白色。但是，如果网站启用了深色模式，则背景色应更改为灰色。

截至撰写本文时，Bootstrap 还没有提供任何实用类来帮助简化网站中暗黑模式的实现，因此 Tailwind CSS 在这方面具有很大的优势，因为它还可以节省您大量的时间。

现代感

我使用Bootstrap已经很多年了，最近我开始注意到Bootstrap组件的设计感觉有些过时。无论是颜色还是其他设计风格，都感觉它没有随着时间推移而适应设计模式的变化。

我非常喜欢 Tailwind CSS 提供的颜色，而且自定义颜色也非常方便，可以轻松获得许多其他颜色。Tailwind CSS 提供了一组默认颜色，但你也可以通过配置轻松更改这些颜色。

例如，在制作网站时，我发现玫瑰色比默认的红色更好。我只需在配置中添加一行代码，就能轻松地将红色系的各种色调替换为玫瑰色的各种色调，同时还能继续使用 Tailwind CSS 提供的实用类：

//tailwind.config.js
red: colors.rose,

与 React 一起使用

有很多方法可以将 Bootstrap 与 React 结合使用。然而，这些方法可能有点麻烦。通常，库会创建不同的 React 组件来模拟 Bootstrap 组件，你需要导入这些组件才能在自己的组件中使用它们。

将 Tailwind CSS 与 React 结合使用非常简单。您只需修改一些配置，即可在组件中轻松使用这些类。

主要区别在于，正如之前提到的，Bootstrap 提供的是大量的 UI 组件，而不仅仅是工具类。因此，在 React 中以这种方式使用它也就不足为奇了。然而，在 React 中使用 Tailwind CSS 感觉更好，尤其是在需要不断创建可复用组件的情况下。

结论

Bootstrap 和 Tailwind CSS 各有其适用场景，因此它们更适合特定的项目。如果您不确定该选择哪一个，请评估项目的优先级，并判断哪个选项更符合您的需求。