什么是Tailwind CSS?
Tailwind CSS是一个功能类优先的CSS框架，它集成了flex、text-center这样的类，Tailwind CSS希望实现的是开发者无需离开HTML页面，即可快速创建出各种样式效果。
Tailwind CSS相较于其他CSS框架有什么优势？
优势1：Tailwind CSS类名具有较好的语义化
传统的语义化类名是CSS难以维护的重要原因，也就是说起名很麻烦，但是Tailwind CSS的语义化类名可以很好的解决这个问题，例如：
text-lg：表示一个较大的字体
text-white：表示字体是白色的
优势2：减少了记忆负担
例如，通过传统的CSS样式要想实现一个盒子阴影的效果，box-shadow，可能要记住上下左右的一些参数，单数通过Tailwind CSS主要需要一个类名.shadow即可实现，减少了开发者的记忆负担。
优势3：提供了基于约束的设计系统
假如一个网页在设计上没有一定的约束，网页上可能会出现非常复杂色彩控制或者是几十种不同类型的字体，但是使用Tailwind CSS则不会，例如他们提供的text-lg,bg-red-500等都具有一定的约束性。
优势4：基于响应式的移动优先
假如，我们在工作中想要将一个页面，在大屏幕上实现三等分，中等屏幕上二等分，小屏幕一等分。这种情形，我肯如果是通过传统CSS可能要写很多行断点控制和媒体查询，但是通过Tailwind CSS只需要一行代码即可。
class = 'grid grid-cols-l md:grid-cols-2 lg:grid-cols-3 gap-4'
优势5：原子化的CSS框架（可定制化程度高）
相较于BootStrap等上一代CSS框架，BootStrap框架提供的是一套完整的设计输出，是组件级别的，例如一个button组件，框架已经写好了所有样式，只需要一个类名就可以了，但是这样的自定义空间不大，有时候我们想要对这个组件进行重写存在一定的困难，但是Tailwind提供的是一套设计规范，相当于一种素材代码，还是button组件，我们需要首先对它进行拆解，例如边框、字体、阴影、圆角等，然后进行组合，为CSS样式提供了更多的可能性。
优势6：通过现有的Tailwind UI框架快速生成美观的页面
我们这里提到的Tailwind UI是根据Tailwind CSS进行二次开发的框架，我们可以通过这些框架，实现拖拽就可以生成导航栏、模态框等功能。
优势7：生产环境非常小
Tainwind 在构建生产环境时会自动删除所有未使用到的CSS，最终发送给客户端的CSS在10KB左右。
优势8：组件驱动更加方便
在CSS的发展和使用过程中，以前是强调CSS和HTML分离，但是随着React、Vue这种框架的出现，前端开发更加强调组件化开发，组件化开发中嵌套的CSS结构不如内联的CSS样式方便，内联的CSS样式又不如Tailwind简洁强大、所以这也是Tailwind发展起来的一个重要原因。
Tailwind CSS有哪些劣势？
劣势1：无法处理CSS function
例如，我们想给一个类的宽度通过calc进行计算，这个需求是Tailwind CSS难以处理的。
.test {
width: calc(100% - 6rem);
}
劣势2：后期维护困难
如果一个样式是别的开发者写好的，我们在后期维护的时候可能需要重新梳理每一个类名的作用，这样后期维护存在一定的困难。
劣势3：框架提供的约束性和自定义需求存在一定矛盾
例如有时候想要根据设计稿实现页面，但是Tailwind是没有这些大小的，例如1.5rem，13px等，需要自己配置，这样在无形中也增加了一定的工作量。