什么是 Tailwind CSS

Tailwind CSS 是一种流行的实用程序优先的 CSS 框架，用于构建自定义用户界面。它是一个提供预定义 CSS 类库的框架，可用于以快速有效的方式将样式应用于 HTML 元素。

什么是引导程序

Bootstrap 是另一种流行的开源 CSS 框架，用于开发响应式和移动优先的网站。它是一个提供网格系统的框架，以及预构建的 UI 组件，例如按钮、表单、导航菜单等，它们可以一起使用，为 Web 设计提供一致的外观和感觉。

Tailwind 比 Bootstrap 好吗？

不，你不能说 tailwind 比 bootstrap 好，你也不能说 bootstrap 比 tailwind 好。这两种技术的创建是为了提供一种快速有效的方式来向 HTML 元素添加样式，而无需编写自定义 CSS 代码，并且它们都以自己独特的方式提供了这些快速有效的解决方案。

你可能会说 bootstrap 比 tailwind 更好，因为它可以帮助你更快地为你的 html 编写样式，但是仅仅因为法拉利比卡车快，并不意味着它更好。如果你想搬重物怎么办？你不会用你珍贵的法拉利那样做。你会？

正如我所说，这些技术以其独特的方式提供解决方案。因此，在某些情况下，tailwind 是更好的技术，而在其他情况下，bootstrap 是更好的技术。

何时使用 Bootstrap 或 Tailwind

使用 bootstrap 还是 tailwind 在很大程度上取决于您了解的技术、您的设计偏好和项目要求。但最终，您可以在以下情况下使用 bootstrap：

• 您需要创建一个快速原型，而不必真正关心设计的独特性。很多人使用 bootstrap，您的网站最终看起来可能与那些网站非常相似。

您可以在以下情况下使用顺风：

• 您需要更灵活地设计和定制您的网站。

我应该学习 Bootstrap 还是 Tailwind

两者都学。作为 Web 开发人员，您了解的技术越多，您的价值就越大，作为 Web 开发人员的生活也会越好。

作为开发人员，您需要开始将 bootstrap 和 tailwind 视为您可以在工具箱中拥有的工具。您工具箱中的工具越多，您的工作就越轻松。

你学习这些技术的顺序并不重要，但如果我处在你的位置，我可能会先学习 tailwind css。这只是我的看法。

学习 Tailwind CSS 需要多少时间？

你学习 tailwind 所花的时间，完全取决于你已经掌握了多少 CSS 知识。最终，如果你对普通 CSS 有真正深刻的理解，那么学习 tailwind CSS 对你来说将不是问题。

注意：始终建议先学习基础技术，然后再学习构建在它之上的任何框架。

Bootstrap 比 Tailwind CSS 更容易吗？

bootstrap 或 tailwind 的易用性其实取决于个人喜好。

Tailwind CSS 为您提供了一个较低级别的 API，使您可以更好地控制您的设计、样式的整体外观和行为。虽然 bootstrap 提供了一个更高级别的 API，其中包含许多您可以插入到您的设计和使用中的预定义组件。如果您已经了解 CSS，并且喜欢自定义设计的外观和感觉，那么顺风顺水对您来说会更容易。如果您不喜欢编写太多样式并且正在寻找可以处理大部分设计工作的工具，那么您会发现引导程序更容易。

Bootstrap 比 Tailwind 更容易学习吗？

是的。以下是我的理由：

• Boostrap 更受欢迎，因此会有更多的教程和资源供您学习。此外，它有一个更大的社区，所以如果你需要帮助，有很多人可以帮助你。
• Tailwind 使您可以更好地控制您的设计，因此使学习曲线更陡峭
• 在 Tailwind 中，您将学习如何使用框架提供的实用程序类从头开始构建自定义设计。为了正确使用这些实用程序类，需要对 CSS 有深入的了解。

Tailwind CSS 适合初学者吗？

如果你是一个初学者，我不会推荐学习 tailwind。为了学习 tailwind 或 bootstrap（或任何其他 CSS 框架），您至少应该具备普通 CSS 的知识。

您可能能够在对 css 有一定了解的情况下学习 bootstrap，但是为了使用 tailwind CSS，您需要真正了解普通 CSS 的工作原理。我之所以这么说，是因为在 tailwind 中，您仍在编写普通的 css。唯一不同的是，您不需要使用外部样式表，您将使用预定义的实用程序类将样式添加到您的 html 元素。

这是在顺风 css 中创建按钮的示例：

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">  Button</button>

这是引导程序中的等效项：

<button type="button" class="btn btn-primary">Primary</button>

从上面的两个示例中，您可以看到在 tailwind 中创建按钮涉及使用类似于常规 css 样式的预定义类。在引导程序中，使用btn btn-primary该类可以毫无问题地创建类似的按钮。

现在，从上面的例子来看，使用 bootstrap 似乎是更简单的选择，但事实是，如果你想向 bootstrap 按钮添加一些特定的样式，你将需要开始编写自定义 css 样式来实现那。对于顺风按钮，您可以使用预定义的实用程序类来添加这些额外的样式。

这就是我的意思：

假设您想在 bootstrap 中创建一个粉红色按钮，此时，您将需要创建自定义样式，因为 bootstrap 没有用于粉红色按钮的内置类。

所以这就是你如何做的：

<button class="btn btn-custom" style="background-color: pink;">  Pink Button</button>

在 tailwind 中，您只需bg-pink-500向按钮添加一个实用程序类即可。

这是一个例子：

<button  class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded">  Pink Button</button>

使用 Bootstrap 优于 Tailwind 的一些优势：

• 受欢迎程度：Bootstrap 是一个更成熟的框架，拥有更大的用户群和更广泛的开发者社区。
• Ready-made Components：Bootstrap 提供了大量预先设计好的 UI 组件，例如按钮、表单、模态、导航栏等，可以很容易地包含在你的项目中。
• 速度：开发速度是使用 bootstrap 的优势之一，因为它带有一些现成的组件。

使用 Tailwind 优于 Bootstrap 的一些优势：

• 可定制性：Tailwind 提供低级实用程序类，可以通过多种方式组合以创建自定义设计，从而实现更高程度的灵活性和控制。
• 性能：与 Bootstrap 相比，Tailwind 生成最小和优化的 CSS，从而缩短加载时间并提高性能。

结论：

学习一个css框架绝对能让你的工作更轻松。Bootstrap 和 tailwind css 是为此目的而创建的两项令人惊叹的技术。学习其中的任何一个，都可能使您成为更好的开发人员。