If you are a web designer, you must have built websites using a popular CSS framework called Bootstrap. But, have you ever tried Tailwind CSS? Tailwind is a popular CSS framework which is gaining popularity in recent times. Bootstrap is very popular among web designers & developers because it is a free and open-source CSS framework. The framework is used for developing responsive, mobile-first websites. It is older than Tailwind CSS (released in August 2011); it was built to design beautiful websites faster.
如果你是一个网页设计师，你一定使用过一种叫做Bootstrap的流行CSS框架来构建网站。但是，你有没有尝试过Tailwind CSS呢？Tailwind是一种近期越来越受欢迎的CSS框架。Bootstrap在网页设计师和开发者中非常流行，因为它是一个免费且开源的CSS框架。这个框架用于开发响应式、移动优先的网站。它比Tailwind CSS更早发布（于2011年8月发布），它的目标是更快地设计出漂亮的网站。
Talking about Tailwind CSS, it is a modern CSS framework. This utility-first CSS framework was built to create custom user interfaces efficiently. With Tailwind CSS, you get a large set of pre-defined utility classes that developers can use to quickly style their components without having to write custom CSS. But since Tailwind CSS is quite a new framework, you might be wondering if it can replace Bootstrap? Whether you choose Bootstrap or Tailwind CSS, both frameworks have their own pros and cons. Before we answer the main question, let’s talk a bit about both the frameworks.
说到Tailwind CSS，它是一个现代的CSS框架。这个实用优先的CSS框架旨在高效地创建自定义用户界面。使用Tailwind CSS，您可以获得一组大型预定义的实用类，开发人员可以使用这些类快速为组件添加样式，而无需编写自定义的CSS。但由于Tailwind CSS是一个相对较新的框架，您可能想知道它是否可以取代Bootstrap？无论您选择Bootstrap还是Tailwind CSS，这两个框架都有各自的优缺点。在回答主要问题之前，让我们稍微了解一下这两个框架。
Bootstrap: A Brief Overview
Bootstrap：简介
Bootstrap is a popular CSS framework, It provides developers with a set of pre-designed and pre-built components that can be used to quickly create responsive and mobile-first websites. Bootstrap solves the problem designers used to face when designing a website using Vanilla CSS. Bootstrap is based on the CSS, HTML, and JavaScript programming languages, and it comes with a wide range of customizable elements, such as navigation bars, buttons, forms, modals, and carousels, among others. It also includes a powerful grid system that allows developers to create layouts that are optimized for different screen sizes, making it an ideal choice for designing responsive websites.
Bootstrap是一个流行的CSS框架，它为开发人员提供了一套预设计和预构建的组件，可以用于快速创建响应式和移动优先的网站。Bootstrap解决了设计师在使用原始CSS设计网站时面临的问题。Bootstrap基于CSS、HTML和JavaScript编程语言，并提供了各种可定制的元素，如导航栏、按钮、表单、模态框和轮播图等。它还包含一个强大的网格系统，允许开发人员创建针对不同屏幕尺寸优化的布局，使其成为设计响应式网站的理想选择。
Overall, Bootstrap is a powerful and versatile CSS framework that is ideal for building responsive and mobile-first websites.
总的来说，Bootstrap是一个强大而多功能的CSS框架，非常适合构建响应式和移动优先的网站。
Tailwind CSS: A Brief Overview
Tailwind CSS：简要概述
Tailwind CSS is a popular utility-first CSS framework that allows developers to quickly create custom designs and layouts for their websites. Unlike other CSS frameworks that provide pre-built components, Tailwind CSS provides a set of CSS utility classes that can be used to create custom designs from scratch. The framework includes a comprehensive set of utility classes that cover everything from colors and typography to layout and spacing. These classes are designed to be composable, meaning they can be combined to create complex designs without writing custom CSS.
Tailwind CSS是一种流行的实用型CSS框架，允许开发人员快速为其网站创建自定义设计和布局。与其他提供预构建组件的CSS框架不同，Tailwind CSS提供了一组CSS实用类，可用于从头开始创建自定义设计。该框架包含了一套全面的实用类，涵盖了从颜色和排版到布局和间距的所有内容。这些类被设计为可组合的，意味着它们可以组合在一起创建复杂的设计，而无需编写自定义的CSS。
Overall, Tailwind CSS is a powerful and flexible CSS framework that is ideal for developers who want to create custom designs and layouts quickly and efficiently. Its comprehensive set of utility classes, customization options, and accessibility features make it a popular choice for web developers of all skill levels.
总的来说，Tailwind CSS 是一个强大而灵活的 CSS 框架，非常适合那些希望快速高效地创建自定义设计和布局的开发者。它拥有全面的实用类、自定义选项和可访问性功能，使其成为各个技能水平的网页开发者的首选。
Tailwind CSS vs Bootstrap
Tailwind CSS对比Bootstrap
Tailwind CSS and Bootstrap are both popular CSS frameworks that allow developers to create responsive and mobile-first websites. While they share some similarities, there are also significant differences between the two frameworks. Let’s check them out.
Tailwind CSS和Bootstrap都是流行的CSS框架，允许开发人员创建响应式和移动优先的网站。虽然它们有一些相似之处，但两个框架之间也存在着显著的差异。让我们来看看它们。
Tailwind CSS
- Utility First 实用至上
- Highly customizable. It gives you much more control over styling so you can pretty much design any kind of UI you want. 高度可定制。它让您对样式有更多的控制，因此您几乎可以设计任何类型的用户界面。
- Provides much more flexibility. You can pretty much do most kinds of css using just classes. 提供更多的灵活性。你几乎可以使用类来完成大多数种类的CSS。
- Every utility can be applied conditionally. We have variables like sm, lg along with pseudo elements like hover, active etc to handle state changes. 每个实用程序都可以有条件地应用。我们有像sm、lg这样的变量，以及像hover、active等伪元素来处理状态变化。
- Will remove all unused css automatically 将自动删除所有未使用的CSS
- Very small bundle size after build 构建后非常小的捆绑包大小
- Takes more time to set up. It takes like 5 steps to set up including installing tailwind cli and post css 设置需要更多时间。设置需要大约5个步骤，包括安装Tailwind CLI和Post CSS。
- Has a learning curve, you need to learn css and abstraction over css. 有一个学习曲线，你需要学习CSS和CSS的抽象化。
Bootstrap 引导程序
- Component First 组件首先
- Difficult to customize. Does not allow much customization so the site will look the same as any other bootstrap site. 定制困难。不允许太多的定制，因此网站看起来与其他任何一个Bootstrap网站都一样。
- Less flexibility compared to tailwind. Only provides sets of predefined classes. 与Tailwind相比，灵活性较差。只提供预定义的类集合。
- Does not provide any variables or pseudo elements. 不提供任何变量或伪元素。
- Does not remove unused css 不删除未使用的CSS
- Comparably large bundle size 相对较大的捆绑包大小
- Takes less time to set up. We can just add CDN links to the html file and that’s it. 设置时间更短。我们只需将CDN链接添加到HTML文件中，就完成了。
- Easy to learn 易学
Conclusion 结论
Tailwind is really useful and provides more control but it also takes time to learn and setup while bootstrap is easy to integrate and learn so personally I use tailwind for rather bigger projects and bootstrap for smaller, but the final result depends on the developer you can choose any framework you like and more comfortable with nobody cares about your technology choices.
Tailwind真的很有用，提供了更多的控制，但学习和设置也需要时间，而Bootstrap易于集成和学习，所以我个人在较大的项目中使用Tailwind，在较小的项目中使用Bootstrap，但最终结果取决于开发者，你可以选择任何你喜欢和更舒适的框架，没有人在乎你的技术选择。