UnoCSS 按需原子化 CSS 引擎：规则全自定义，比 Tailwind 更自由的轻量方案

UnoCSS 不是一个固定框架，而是一台按需原子化引擎。它没有预设的「一套类名」，所有能力都是可选的 preset。你可以只取一个 presetUno 得到兼容 Tailwind 的工具集，也能自己定义规则与设计体系。对 Vite、Webpack 等构建工具是一等集成，HMR 和构建都更快。

它解决什么问题

传统 CSS 框架给你一套写死的类名与视觉，想改设计语言就得层层覆盖样式；做重定制时配置越来越绕，最后没人敢动。

也有人卡在 Tailwind 的插件生态里，想换引擎又怕迁移成本。UnoCSS 的思路是反过来：先把引擎给你，规则由你定，自由度更高。

核心能力

与 Tailwind 的关键取舍

UnoCSS 不支持 Tailwind 的插件系统与配置格式。如果你在一个重度定制、大量使用 Tailwind 插件的旧项目里，直接迁移会很麻烦，很多插件生态无法直接复用，需要重写规则。

反过来，当你想完全自建设计体系、不被任何预制类名绑死时，UnoCSS 的自由度明显更高：预设可拆可换，规则由你定义。Windi CSS 已于 2023 年 3 月停止维护，其后续能力被合进了 UnoCSS，它可视为精神继任者。

同类工具怎么选

谁适合用

• 想自建设计体系、不愿被预制类名绑死的前端
• 用 Vite / Webpack，追求更快 HMR 与构建速度的团队
• 从 Windi CSS 过来、需要精神继任方案的人

怎么开始

1. 用 npm 安装 unocss，在 Vite / Webpack 里加上对应插件。
2. 先引入 presetUno，获得一套兼容 Tailwind 的原子类。
3. 打开浏览器里的 UnoCSS Inspector，实时查看生成的样式。
4. 需要组件语义时，用 shortcuts 把常用类组合成短名。
5. 想完全自定义时，自己写 preset 定义规则与设计令牌。

常见问题

和 Tailwind 能互相替换吗？
部分可以。presetUno 提供兼容层，但 UnoCSS 不兼容 Tailwind 的插件与配置格式，重度定制项目迁移需重写规则。

一定要用 Vite 吗？
不是。它对 Vite、Webpack 等都有集成，也能通过 CDN runtime 在浏览器里直接运行，无需构建。

它是 Windi CSS 的替代品吗？
可视为精神继任者。Windi CSS 于 2023 年 3 月停止维护，后续功能被合进了 UnoCSS。

需要写 JavaScript 吗？
使用不需要，纯写类即可；自定义 preset 时才会写少量 JS 配置。

授权与合规

UnoCSS 采用 MIT 协议发布，可自由用于个人与商业项目；它只是一个原子化 CSS 引擎，不依赖任何付费功能，商用无限制。 官网：unocss.dev。