和 Tailwind css 类似： css原子类框架

优点：

1. 基于约束 : api约束，让我们在 颜色，间距，板式，阴影等有一定约束，而不是使用任意的颜色值样式，让网页更具有规范性
2. 代码量最小，自动删除未使用的css代码，最终生成css代码可能是最小的
3. 响应式设计，，不必再写媒体查询css，，而是在原子类前面加上 sm，md，lg 等这些前缀
4. 支持hover 和 focus 状态，， 悬停和点击效果
5. @apply指令 ，，将css代码声明到下面
   …

  <button class="btn" >button</button>
<style scoped>
.btn{@apply bg-purple-500 text-indigo-50 px-4 py-2  rounded-full hover:(bg-purple-900) transition-all duration-500focus:(ring-8 ring-purple-900);
}
</style>

文档：https://cn.windicss.org/utilities/animations/transitions.html#transitions-duration