CSS原子化的优缺点
1.减少了css体积，提高了css复用
2.减少起名的复杂度
3.增加了记忆成本 将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg
tips：最好用于vite webpack属于阉割版功能很少
安装
vite.config.ts
main.ts 引入
配置静态css
配置动态css（使用正则表达式）
m-参数*10 例如 m-10 就是 margin:100px
shortcuts 可以自定义组合样式
unocss 预设
1.presetIcons 预设图标集合安装
首先我们去官网（方便浏览和使用iconify）浏览我们需要的icon，比如这里我用到了Google Material Icons图标集里面的baseline-add-circle图标
2.presetAttributify 属性化模式支持
属性语义化 无须class
3.presetUno 工具类预设默认的 @unocss/preset-uno 预设（实验阶段）是一系列流行的原子化框架的 通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等。例如，ml-3（Tailwind），ms-2（Bootstrap），ma4（Tachyons），mt-10px（Windi CSS）均会生效。