[图片上传失败...(image-475de9-1636387074601)]
个人总结 tailwind css 功能主要包括三部分：
tailwind css 提供了一套以移动优先的，响应式样式类, 类似原bootstrap 可直接使用
[图片上传失败...(image-87b874-1636387074601)]
tailwind css 为处理响应式，伪类， 伪元素提供类型作用范围限定类
样式扩展，使我们能组合现有基础类或定义自己的样式类.
通过 taildwind.config.js 配置文件，能实现更多自定义功能
配置主要分为：
tailwind css 提供的预设类很多，一般根据官方文档，按照功能查询所需的类名。
总结几条规则：
个人觉得 tailwind css 的主要优势在于提供了一套自定义样式模板的工具，并有一个完整的可扩展的基础示例 预设样式 。
非常适合有UI设计体系或要求统一UI视觉的产品, 通过组合基础样式模板，统一样式规范，提高编写效率。
如果UI本身就没有统一规范的化，还是内联样式文件来的灵活些。
这一套有点像组件库为了可配置主题而抽离出来的组件样式变量。
官方文档
冲突。_饩龇椒ㄓ泻芏啵绻梢远_tml改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变 细化选择符。
_偃缛质钦庋炊ㄒ逡桓鲈氐难降模?.abc {background:#000}，同时这个class为abc的元素是隶属于某个元素的，比如下面这样的html代码结构
_敲丛谙富_ss里面，只需要在.abc前面加多一个父元素的选择符就行了：.container .abc {background:#fff}
_庋?.container .abc的优先级就大于了.abc，自然细化css里面的background设置也就不会被全局CSS覆盖了。
?
