「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。
随着TailwindCSS越来越流行，一部分程序员不会花时间去了解它与传统css框架的区别，仅仅为了跟风就使用它，最终获得一个不好的体验，认为它比传统框架更难，从而停止使用它。本文尝试列举关于Tailwind CSS所需要知道的概要。
实用放第一的框架
Tailwind和其他框架最大的不同在于它是基于实用的框架而其他框架像Bootstrap 或 Bulma 这样的框架是基于组件的框架。那么这两者之间有什么区别呢？
基于组件的框架如Bootstrap或Bulma提供了一组组件，通过将定义好的类添加到html元素上来使用这些组件，例如，Bootstrap 一共有 24 个组件，我们只需添加相关类就能使用。
另一方面，Tailwind CSS 是一个基于实用的框架，它不会通过预定义的组件来限制产品的设计，而是提供强大的构建块，可用于项目的独特设计。
Tailwind为每个css属性创建一个类，我们也可以根据需要创建新的类，这给了我们充分的自由和灵活性。但这也需要付出代价，基于组件的框架不需要我们对css有太多的了解，参考框架文档就能写出所需要的代码，但是基于实用的框架Tailwind，不会以这种方式工作。 您需要对 CSS 有深刻的理解才能更好的驾驭Tailwind。
尺寸单位
主要是rem，所有的类都使用rem作为样式单位，Tailwind的类涵盖了从最小的 rem 单位 0.125rem (2px)到 24rem。此外，我们可以根据自己的需要在 tailwind.config 文件（可以是 px、em 或其他任何内容）中添加单位。
响应式设计
Tailwind是移动端优先的框架，默认情况下，最小的实用类是sm，它设置最小宽度为 640px 的媒体查询。如果你需要更大的类，你就需要使用媒体查询和设备断点，这就是为什么在使用 Tailwind来创建美妙的项目，必须先了解响应式设计和媒体查询。
Flexbox & Grid
与传统方式相比，使用 grid 和 flexbox创建布局很容易。 但是，你可能会发现一个困惑的地方，因为许多类相互冲突，导致两种布局都使用一个类。 比如justify-{value}、align-{value}、place-{value} 和 gap。 这些类为 flexbox 和 grid 服务相同的目标。 清楚地了解它们将帮助我们节省一些时间。
其他重要概念
和css一样，tailwind不会就这么简单，单位、响应式设计和 Flexbox/Grid 需要重点关注，因为一旦了解了这些知识的原理，就不会对使用Tailwind感到困难。除此之外，这里还有一些值得了解的事情： CSS Transition 和 Transform 属性 、纵横比等等，这里没有提到 padding、margin、box-sizing、float 和 z-index，因为如果你不知道如何使用它们，那么你应该考虑再坚持一段时间使用纯 CSS。
什么时候使用 Tailwind？
如果您有较多的使用原生CSS经验并且较好的掌握了CSS，那么你几乎可以在任何地方使用 Tailwind。
如果你的前端技术栈有具有基于组件的库（例如 react），则使用 Tailwind 将会使你充分享受到它的自由和灵活性。
什么时候不应该使用 Tailwind？
如果你没有较多的CSS 经验，甚至不要考虑使用 Tailwind。 一开始你可能不会遇到问题，但随着项目变大，它会变得越来越难。
如果你使用 Vanilla JS 构建网站，则可能无法使用用 Tailwind。 为每个不同的组件使用相同的类名会使代码变得多余、不可读和混乱。
同样，应该避免将 Tailwind 用于后端逻辑比设计更重要的项目。
总结
当你的基础比较薄弱是，使用Tailwind会有一种挫败感，但是当你的基础变得越来越好时，你会挖掘出Tailwind CSS 的全部潜力！
