在逛沸点的时候看见一个讨论css的问题，有人提到了 Tailwind Css 框架，所以记录一下，方便学习
Tailwind CSS 介绍
Tailwind 能够快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式。
tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件，而不是在组件基础上实现个性化。
如果你从来没见过 Tailwind 的实际应用，可以看这个：
<div class="bg-gray-100 rounded-xl p-8">Hello World</div>
这里的类名就反映了 Tailwind 的定义：一个包含多个预定义类（所谓的工具类）的集合。你并不需要编写基础的 CSS 样式规则，只需要直接在 HTML 中应用已经事先定义好的类名
Tailwind Css框架解决的问题/痛点
- 取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。
- 需要用 JS 控制样式的时候又得多写一个类，尤其交互多的场景。
- 组件复用大家都懂，但是样式复用少之又少，这样就造成了冗余css代码变多。
- 全局污染，这个其实现在挺多工具都能帮我们自动解决了。
- 死代码问题。JS 我们通过 tree shaking 的方式去除用不到的代码减少文件体积，但是 CSS 该怎么去除？尤其当项目变大以后，无用 CSS 代码总会出现。
- 样式表的插入顺序影响了 CSS 到底是如何生效的。
以上摘自知乎文章zhuanlan.zhihu.com/p/470586190
Tailwind Css框架优点
可以通过修饰符完成对栅格布局、响应式、暗黑模式、伪元素伪类的操作，也可以函数式地编写css，如：
- @tailwind：使用 @Tailwind 指令将 Tailwind 的 base, components, utilities 插入到 CSS 中。
- @apply：使用 @apply 将任何样式内联到您自己的自定义 CSS 中。
- @layer：使用 @layer 指令告诉 Tailwind 属于一组自定义样式的 “块”。在 base, components, utilities 有效。
- @variants：您可以通过在 @variants 指令中包装它们的定义来生成响应式、hover, focus, active 和其他伪类。
- @responsive：通过将 class 的定义包装在 @responsive 指令中，您可以生成自己 class 的响应式。
- @screen: 使用@screen指令并按名称引用断点，而不是在您自己的CSS中复制它们的值。
- theme()：使用 theme() 函数和 . 访问你的 Tailwind 配置值。
由于tailwind是一个常用css的集合，在开发完成后，有些未用到的样式及功能就变得冗余了，解决的方法：
在构建生产文件时引入
PurgeCSS，这个工具在构建的时候，对代码进行正则匹配，剔除没有使用过的原子类。这意味着最后打包出来的 CSS 文件是极小的，一般的项目构建出来的CSS文件, 再经过压缩甚至不会超过10K。
另外，需要注意的就是和UI设计师的沟通了，提前沟通好项目的Theme色调等，不然相似的页面却不同的Theme颜色、圆角等等，还不如手撸样式、、
