[开源]UnoCSS：新一代原子化 CSS 引擎全面解析

🚀 1. 项目简介

UnoCSS 是一个即时、按需生成的原子化 CSS 引擎（Atomic CSS Engine），由知名前端开发者 Anthony Fu（托尼老师）主导开发。它并非传统意义上的“CSS 框架”，而是一个高度灵活、可定制的样式生成引擎。

与 Tailwind CSS 等预设大量工具类的框架不同，UnoCSS 本身不内置任何类名规则，所有功能均通过“预设”（presets）和“自定义规则”（rules）动态实现。这意味着开发者可以完全按照自己的设计系统、命名习惯甚至项目需求来构建专属的原子化样式体系。

UnoCSS 最打动我的一点，就是它真的做到了用多少，生成多少——没用到的样式，一行都不会塞进最终产物里。

⚖️ 2. 开源协议

UnoCSS 采用 MIT 许可证（MIT License） 开源，允许用户在商业和非商业项目中自由使用、修改和分发，仅需保留原始版权声明。这使得 UnoCSS 成为一个对企业和个人开发者都非常友好的开源工具。

注：其官方预设（如 @unocss/preset-wind、@unocss/preset-icons 等）同样遵循 MIT 协议。

🔑 3. 核心特性

✅ 极致性能

• • 无需 AST 解析：直接通过正则匹配模板中的类名，跳过 PostCSS 和 CSS 抽象语法树处理，构建速度比 Tailwind JIT 快 5 倍以上（早期测试甚至达 200 倍）。
• • 按需生成：仅扫描并生成项目中实际使用的类，最终 CSS 体积极小（通常几十 KB），无 purge 步骤。
• • 内存缓存机制：对已生成的类名进行缓存，避免重复计算。

✅ 高度灵活 & 可定制

• • 规则即代码：通过 JavaScript/TypeScript 编写正则规则，支持任意值（如 m-7.5、text-shadow-3）。
• • 预设系统：官方提供多种预设（preset），如：
  • • preset-wind：兼容 Tailwind/Windi CSS 类名
  • • preset-attributify：属性化模式（见下文）
  • • preset-icons：纯 CSS 图标支持
• • 自定义预设：团队可封装内部设计系统为私有 preset，实现复用。

✅ 创新开发体验

• 属性化模式（Attributify Mode） 将类名写成 HTML 属性，代码更简洁：

<!-- 传统 -->
<div class="m-4 p-2 bg-red text-white rounded"></div>
<!-- 属性化 -->
<div m-4 p-2 bg-red text-white rounded></div>

• 纯 CSS 图标（Preset Icons） 通过类名直接使用图标（来自 Iconify），支持颜色、大小控制：

<i class="i-carbon-home text-2xl text-blue"></i>

也支持本地 SVG 图标集。

• 变体组（Variant Group） 简化重复前缀：

<!-- 传统 -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"></div>
<!-- 变体组 -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"></div>

• 快捷方式（Shortcuts） 定义复合类或动态类：

shortcuts: [
  { btn: 'py-2 px-4 rounded font-semibold' },
  [/^btn-(.*)$/, ([, color]) => `bg-${color}-400 text-white py-2 px-4`]
]

• 内置检查器（Inspector） 开发时访问 http://localhost:5173/__unocss 可查看所有已生成类、使用位置、CSS 体积等。

✅ 轻量 & 兼容性强

• • 核心包压缩后仅 ~6KB
• • 支持 Vite、Webpack、Rollup、Nuxt、Vue、React、Svelte 等主流框架
• • 提供 CDN 运行时版本，可用于老旧项目无缝接入

📸 4. 项目概览

📦 5. 安装及使用

以 Vite + Vue 为例

第一步：安装依赖

npm install -D unocss
# 如需属性化模式或图标
npm install -D @unocss/preset-attributify @unocss/preset-icons

第二步：配置 Vite

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS()
  ]
})

第三步：创建 UnoCSS 配置

// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),          // 默认预设（类似 Windi CSS）
    presetAttributify(),  // 属性化模式
    presetIcons()         // 图标支持
  ],
  rules: [
    // 自定义规则：text-shadow-1 → text-shadow: 0 0 1px #000
    [/^text-shadow-(\d+)$/, ([_, d]) => ({ 'text-shadow': `0 0 ${d}px #000` })]
  ],
  safelist: ['m-1', 'm-2'] // 动态类名安全列表
})

第四步：引入样式入口

// main.ts
import 'virtual:uno.css' // 虚拟文件，由 UnoCSS 自动生成
import App from './App.vue'

第五步：在组件中使用

<template>
  <div m-4 p-3 bg-white rounded shadow>
    <i i-carbon-home text-2xl />
    <span text-teal-500>Hello UnoCSS!</span>
  </div>
</template>

🌐 6. 项目开源地址

• • GitHub 主仓库：https://github.com/unocss/unocss
• • 官方文档： https://unocss.dev
• • 在线图标库（Icones）：https://icones.js.org

✅ 7. 总结

UnoCSS 让我重新思考：原子化 CSS 不一定非得是个“框架”，也可以是个灵活的“引擎”。

用了一段时间后，我最大的感受是——它把选择权真正交还给了开发者。

如果你只是想要 Tailwind 的体验，preset-wind 几乎能无缝切换；但如果你有更复杂的需求——比如自定义设计系统、动态主题，或者想直接用图标类名（如 i-carbon-home）——UnoCSS 的灵活性就体现出来了。

当然，它的生态还没 Tailwind 那么成熟，文档也需要多翻几遍才能摸清门道。但一旦配好，那种“按需生成 + 极速构建”的体验，真的很难回去。

适合尝试 UnoCSS 的场景：

• • 团队已有设计系统，不想被预设类名束缚
• • 对包体积和构建速度有较高要求（如 H5、小程序）
• • 想用属性化写法、图标集成等提升开发效率
• • 愿意花一点时间配置，换取长期的自由度

如果你正在搭建新项目，又希望样式系统真正服务于业务而非反过来，不妨给 UnoCSS 一个机会。它可能不是最省心的，但一定是最自由的。