令人头大的css样式
- 是否总是重复写css？
- 是否为起classname 头大？
- 是否为响应式写多个样式？
- 为深夜模式再写一套？
- css 文件上百行？
...
试一试Tailwind， 给它一刻钟的机会， 你不会再厌恶写css， 它绝对是命名困难户的春天
Tailwind 是什么
一个css 库， 集成了诸如 flex, pt-4, text-center 这样的类 , 直接在你的dom上组合使用它们
传统的语义化命名 并不是写css className 的最佳实践， 或许你会觉得原子css 看上去像在历史回滚，我想这可能是你对tailwind 的第一眼就不喜欢的原因，但是它远远不只是“原子css”
为什么要用Tailwind
特性一：功能类优先，提供丰富、系统的样式API
就像你看到的， 你不必写css 文件样式，你只需要将html需要用到的功能样式组合进它的className， 这样做不必再耗费精力命名，不必重复写样式
丰富的样式api，满足几乎所有的设计场景
特性二： 涵盖所有的css 属性， 包括hover focus & 其它的state ， 还能支持深色模式
<div className="hover:bg-black bg-white"></div>
甚至还有group-hover 这样的
特性三：生产环境体积特别的小
生产环境下自动移除无用的css，大部分不超过10kb
特性四： 移动端友好，适配性高，可拓展的断点
tailwind 默认设置了断点， 使用方法如下
<div className="md:text-sm sm:text-xs"></div>
可以在tailwind.config.js 中设置添加自己想要的断点
特性五： 复用性高
如果你有几个相同样式的DOM， 你不需要重复组合多次这样的功能className， 可以将它们提取到一个组件或者模版片段，Tailwind 也提供了@apply 指令，可以将你需要的功能className 集合到一个className中， 用法如下：
//styles.css
.btn{
@apply text-sm mt-4 p-3 sm:text-xs sm:mt-2 sm:p-2;
}
index.html
<button class="btn"></button>
特性六： 易于拓展、调整、改变
Tailwind 提供了丰富的开箱即用的默认值， 同时所有的内容也都可以定制，包括颜色、间距等
使用tailwind.config.js 文件构建你的设计系统
特性七： 世界一流的IDE集成
VS code 的tailwind css 智能提示拓展涵盖了所有的类
自动提示、建议 0成本学习
更适用于
注重UI界面的展示类网站， 定制化高的场景，对于B端系统，定制化极少，用antd 的组件级别的样式就可以（看UI的建议）
缺点： 写的久了， 可能会忘记原生的css 写法
