官方文档
英文文档：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
中文文档：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
热度
从npm.devtool的标签可以看出，截至2023年8月，tailwindCss每个月npm下载量高达600万次，star数量也有7万+，依赖于它的Package及Github Repo更是成千上万，足以见得它的受欢迎程度。
简介
来自官网
只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。
本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。
使用情况
一般项目中的CSS样式分为四种粒度：
<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div><div class="rounded-lg p-4"> Click </div><div class="button"> Click </div><style>.button{ border-radius: '0.5rem'; padding: '1rem'; }</style><Button> Click </Button> |
越往下，粒度越大，而TailwindCss位于第二层，我们称为“原子化的CSS”
思考问题
备受争议的问题：开发者已经很熟悉的css语言，还需要学习TailwindCss的语法，有一定的学习成本、新的记忆负担，乍一看不足以提供多大的便利性
仅仅是这种样式：text-center（text-align: center）、p-4（padding: 1rem; /* 16px */）。一个类名代表了一个样式属性，貌似提供不了多大的便利，而且刚开始用，不熟悉的语法还需要对照文档去找，有些麻烦
复杂样式，比如这种样式：比如一个 grid-cols-3 和 shadow ：
/* 三等分的 Grid 属性 */.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}/* box-shadow 各个位置的参数的含义我们很难记住，这个时候用一个.shadow就绝对方便 */.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);} |
语义化类名，记忆成本不会很高，用过几次就熟悉了；而且官方文档清晰，配合VsCode插件语法提示学习成本真的不高
<button class="text-lg text-white ring animate-spin"> Click </button> |
- text-lg，一个较大字体
- text-white，白色的文字
- ring，给按钮加一个圆圈
- animate-spin，一个现成的动画
- 而且如果你的UI规范规定次级标题字体为15px（只是举例，一般不用奇数），还可以对这个“text-lg”进行重写，或者新增一个自己的类名：text-title，实现全局的复用（通过 tailwind.config.js 配置文件实现，可以查看官网说明）
使用起来比较爽的响应式布局：
<div class="grid sm:grid-cols-1 lg:grid-cols-2"> <el-form> <el-form-item></el-form-item> <el-form-item></el-form-item> <el-form-item></el-form-item> <el-form-item></el-form-item> </el-form></div> |
上面的效果如果自己通过grid布局写的话：
@media (min-width: 1024px) { .container { grid-template-columns: repeat(2,minmax(0,1fr)); }}@media (min-width: 640px) { .container { grid-template-columns: repeat(1,minmax(0,1fr)); }}.conainer { display: grid; gap: 1rem;} |
修饰符和各种伪类、暗黑模式等的支持，使用前缀的方式：
<div class="focus:ring-2 hover:bg-red-700 dark:bg-gray-800"></div> |
除以上的好处，还有一些好处是：
- 不用冥思苦想查字典查翻译去给各个class起奇奇怪怪的类名，如果有类名的命名规范还好一些，有的时候更多的是没什么规范，不全局搜索还找不到这个类，或者存在多余的没有样式依赖的“空白类”
- 自己设置一个 fontSize，padding、margin 实在不知道设置多少尺寸，tailwindcss 有较大的约束
通过以上的尝试，你是不是觉得TailwindCss还是很好用的。
类似于行内样式的类名堆砌是否让代码不好维护，特别是人员调动后？
我自己之前接手了一个用bootstrap写的项目，由于之前没有接触过，乍一看不明白那么多的类名是什么含义，但找到文档并了解文档的排版规律，什么类名大概代表什么样式，要找对应的样式去文档中翻查，其实比有些项目人员自己写的动辄100+行的样式文件理解的不是一星半点，顿时觉得真香，可以说维护起来比之前的项目更容易
至于在浏览器中的调试，还是一目了然的，而且没有之前各种class的重复性覆盖的问题：
虽然CSS代码体积变少了，但是HTML代码体积变大了，还有最终打包出来的css文件的体积问题
这的确是一个问题，html标签的类名会很长很长
tailwindCss也支持把很多类名提取出来成为一个组件，但是我自己没有这样用过
最终打包出来的css文件的体积：因为它需要把所有的css属性全部都封装一遍，所以css文件巨大，3M多。所以不建议在页面内直接引入Tailwind 原生css文件的做法。 Tailwind CSS官方团队为了解决这个问题，提出了一个方案，在编译的时候引入PurgeCSS 这个工具，构建的时候，会自动删除掉所有你没用到的css。只保留你用到的css。这样最终打包出来的css文件极小极小，一般的项目构建出来的css文件, 压缩一下甚至不会超过10K。
这种类似的原子化的CSS工具有很多：bootstrap、unocssCss等，TailwindCss与之相比有多大的优势
它和bootstrap之类的css框架有什么区别呢？区别在于bootstrap帮你封装好了一些样式，比如卡片，表单，按钮，导航等等。Tailwind CSS没有封装任何样式，一丝一毫都没有。bootstrap降低了定制性，你很难依靠bootstrap去定制一个自己的类，虽然bootstrap也有部分原子化的类名，但那只是常用的一些css属性。Tailwind CSS完全自由，你可以玩出自己的花样，你甚至可以通过Tailwind CSS，打造一套属于自己的类似bootstrap这样的ui框架。
如果使用bootstrap，你如果想改变一个按钮的样式，就会比较困难。你得用覆盖式的写法，通过自己的样式覆盖掉bootstrap自带的样式。如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。
TailwindCss的限制有哪些？
elemen-plus的组件样式重写，在代码中想彻底摆脱<style>样式完全使用tailWindCss还是不行的，比如这种代码，处理表单页面el-select、el-input、el-date-picker长度不一致：
.el-form-item { margin-right: 0 !important;}.el-form-item__label { position: absolute;}.el-form-item__content { width: 100%; padding-left: 80px;}.el-select,.el-input_inner { width: 100%;}:deep(.el-date-editor.el-input) { width: 100%;}:deep(.el-date-editor .el-input__wrapper) { flex-direction: row-reverse !important; .el-input__suffix { position: absolute; right: 3px; }} |
除此之外，较为复杂的类选择器，父级元素鼠标悬浮时，子元素的样式处理：
.container:hover .item {} |
CSS function
.body { height: calc(100vh - 6rem)} |
开发插件推荐
VsCode插件，语法提示：Tailwind CSS IntelliSense
最后，初次使用，如以上总结有不严谨甚至错误，请指出。