UnoCSS（原子化 CSS 引擎）

UnoCSS 是一个高度可定制的原子化 CSS 引擎(atomic CSS engine),由 Anthony Fu 创建。与预先内置大量工具类的方案不同,UnoCSS 本身几乎不带任何规则,所有工具类都由预设(preset)定义,并在扫描到实际用到时即时生成对应样式,因此产出的 CSS 极为精简。

概述

原子化 CSS 用一个个单一职责的小类(如控制外边距、颜色的类)拼出样式,Tailwind CSS 是其代表。UnoCSS 把这一思路进一步抽象为可插拔的引擎:它扫描源码中出现的类名,按预设规则动态生成 CSS。官方提供了兼容 Tailwind 风格的预设,也允许用户用规则、变体、快捷方式自定义整套设计语言,甚至内联任意样式。它与 Vite 深度集成,构建速度很快。

核心特点

• 按需生成:只为代码中真正出现的类名产出 CSS,体积最小化。
• 无固定规则:核心不预设工具类,全部通过预设与自定义规则配置。
• 提供 Wind 预设兼容 Tailwind/Windi 用法,迁移成本低。
• 支持属性化模式、图标预设、快捷方式与任意值,灵活性高。
• 与 Vite 集成紧密,并可用于 Nuxt、Astro 等多种框架。

应用场景

UnoCSS 适合追求构建性能、想要高度自定义原子化体系的项目,尤其是使用 Vite 或 Vue 生态的团队。它也常用于图标按需引入、把设计规范编码成可复用规则,以及需要在 Tailwind 之外获得更大自由度的场合。

常见问题

问:UnoCSS 是 Tailwind 的替代品吗?答:可以视作更底层、更灵活的替代方案。通过 Wind 预设它能提供近似 Tailwind 的用法,同时允许深度自定义规则与更快的构建,但生态和文档丰富度上 Tailwind 更成熟。

问:即时生成会拖慢开发吗?答:不会。UnoCSS 以性能为设计目标,扫描与生成过程高效,并与 Vite 的开发服务器无缝配合。