vue项目css选型2-tailwind原子类的优劣
- 原生 css 在实际落地中存在以下问题，详情见另一篇文章：vue项目css选型1-原生css的问题
- 样式的定义顺序影响了最终样式
- 层叠样式的特点导致渲染结果难以预期
- tailwind 原子类解决了以上问题
- 使用 @tailwind 和核心插件配置决定样式的定义顺序，提供了合理的默认顺序
- 通过预先定义的实用 class，实现了当前类只对当前标签生效的特点
- 添加 class 仅仅为当前标签添加样式，类似于内联样式，但是支持媒体查询、伪类等需要 css 原生特性支持的功能
- 优点
- 提供预定义的 class，适用于绝大部分样式，解决了 class 命名规则难以落地的问题
- 支持树摇，自动抖落没有使用到的预定义 class，解决了 class 定义和使用互相无法感知的问题
- 提供了预定义 class 文档和统一的配置文件，解决了 class 内部含义难以查询的问题
- 支持 class 含义的配置，提供了全局修改样式的可能性
- 缺点
- 类似于内联样式的特点，导致组件内部的样式难以修改
- tailwind 的初衷是继承原生 css，使样式成为独立体系提供给外部消费
- 但是在实际开发中往往需要修改某些原码不属于自身管理的组件的样式
- 直接修改配置项导致某个 class 的含义改变会影响到所有使用者，明显是不合适的
- 这个问题涉及自有公共组件、外部组件样式选型的问题，将在下篇文章探讨
