字数
385 字
阅读时间
2 分钟
- Anthony Fu 的博客 重新构想原子化 CSS
- 官网对比：Why UnoCSS?
疑问：
- PostCSS 做的什么工作？
- Iconify 做了什么，为什么能实现纯 css 图标
不同维度
- TailwindCSS 本质上还是 postCSS 的插件，在其上做了定制化的工作
- 而 UnoCSS 是一个同构引擎，具有与构建工具 (PostCSS) 同等能力
- 例如 CDN 运行时，动态生成 CSS
- 与构建工具深度集成，提供更好的 HMR 和开发人员体验（Inspector）
不同性能
TailwindCSS 从一开始是做的全量编译
尽管后来也有使用及时编译（JIT）
UnoCSS 出发点就是做按需加载（更好的支持 vite 的加载速度快的体验）
不同灵活度
Uno 提供的是定制化的能力，而 Tailwind 则是打包了定制化的产品
从扩展性和灵活度来看， Uno 显然更具上风
- Uno 默认的 preset css 规则便是 Tailwind + windcss + bootstrap 的超集
- 属性化模式
- 纯 CSS 图标
- CSS 作用域
属性化模式
它会把你的冗长的 Tailwind 代码（难以阅读与编辑）：
html
<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
Button
</button>变成：
html
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>在更好的按类型进行组织的同时，也节省了重复输入相同前缀的时间
贡献者
jiechen