Tailwind CSS 是一个基于原子类的 CSS 框架，它提供了一系列的 CSS 类，可以用来快速构建网页界面。与传统的 CSS 框架不同，Tailwind CSS 不是提供一些预定义的样式，而是提供了一系列的原子类，诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，这些原子类可以组合使用，从而构建出任意的样式。
Tailwind CSS 的原子类非常细致，包括了各种常见的 CSS 属性，如颜色、字体、边框、间距、宽度、高度等等。使用 Tailwind CSS 可以大大提高开发效率，因为你不需要手写 CSS 样式，只需要在 HTML 中添加相应的 CSS 类即可。
另外，Tailwind CSS 还提供了一些实用的工具类，如响应式布局、文本对齐、背景颜色、阴影等等，这些工具类可以帮助你更快速地构建出复杂的网页界面。
例如我在index.html的div标签上使用了flex这个类名，tailwind编译之后会生成flex的样式并将内容输出到output.css文件中：
// index.html
<div class="flex">hello world</div>
// 经过tailwind编译之后生成output.css
// output.css
.flex {
display: flex;
}
此时就有这么一个问题在项目中我们提前写好全局样式，也可以起到一样的效果，那么使用Tailwind CSS的优势在哪里呢？
主要有两大优势
1.样式所占用的空间较小
其实我们在搭建tailwind的项目过程中就可以发现，tailwind存在于JIT引擎（Just-In-Time），就是在编译过程才去扫描我们的html文件，在这个过程中去识别使用了哪些类名，然后才生成对应的样式。
相比于预先直接全局写好大量的类名，JIT机制的优点在于精简紧凑，样式所占用的空间较小，因为用到了才会生成。
2.对于类名的规范统一
tailwind对于类名的规则约定，也可以说是一种写类名的规范与统一，统一团队内不同的成员甚至是不同的团队之间对于类名的书写与阅读。这给团队带来的效益，从长远来看利是远远大于弊的。
取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。
- 需要用 JS 控制样式的时候又得多写一个类，尤其交互多的场景。
- 组件复用大家都懂，但是样式复用少之又少，这样就造成了冗余代码变多。
- 全局污染，这个其实现在挺多工具都能帮我们自动解决了。
- 死代码问题。JS 我们通过 tree shaking 的方式去除用不到的代码减少文件体积，但是 CSS 该怎么去除？尤其当项目变大以后，无用 CSS 代码总会出现。
- 样式表的插入顺序影响了 CSS 到底是如何生效的。