UnoCSS 原理与自定义规则

前端工作日常
349 阅读3分钟

诞生背景‌

  1. ‌传统原子化框架的性能瓶颈‌
    早期 Tailwind CSS 的 JIT 模式虽缓解了全量生成 CSS 的问题，但其预生成机制仍导致构建时存在性能瓶颈，尤其在大型项目中易出现开发环境下 CSS 加载延迟和体积冗余的问题28。Anthony Fu 在开发 Vitesse 模板时，发现 Tailwind 生成的数 MB CSS 文件成为 Vite 项目的性能瓶颈。
  2. ‌对灵活性的需求‌
    Tailwind CSS 的预设规则扩展性有限，自定义功能需频繁查阅文档并修改配置文件，开发体验不够灵活78。例如，新增类似 border-10 的类需额外配置，流程繁琐。
  3. ‌技术继承与创新‌
    UnoCSS 是 Windi CSS 的“精神继承者”，继承了其按需生成理念，并进一步优化性能与开发体验。随着 Windi CSS 停止维护，UnoCSS 成为原子化 CSS 领域的新解决方案

核心价值‌

  1. ‌按需生成机制‌
    仅在代码中实际使用的类名会被动态生成 CSS 规则，对比传统框架的全量生成模式，显著减少构建体积（甚至可减少 90% 以上），提升开发与生产环境性能。
  2. ‌极简配置与高度灵活‌
    提供预设系统（如 @unocss/preset-uno）快速兼容 Tailwind/Windi 语法，同时支持自定义原子化规则与动态变体，无需复杂配置即可扩展功能。例如，通过简单规则定义即可实现类似 color-#hex 的动态颜色支持12。
  3. ‌框架与工具链适配性‌
    原生支持 Vite、Webpack 等现代构建工具，与 Vue、React、Svelte 等主流框架无缝集成，尤其适合基于 Vite 的轻量化项目。
  4. ‌开发体验优化‌
    通过即时热更新（HMR）和交互式文档插件，开发者可在编码时实时预览样式效果，减少上下文切换成本，提升开发效率

UnoCSS 预设规则的分类

UnoCSS 内置了 4 类核心预设规则，覆盖常见开发场景：

预设类型示例类名生成 CSS作用
原子化工具类m-4.m-4 { margin: 1rem; }快速定义间距、颜色等
图标系统i-mdi:account.i-mdi\:account { ... }按需引入 Material Design 图标
主题系统text-primary.text-primary { color: #1890ff; }统一管理品牌色、字体等
响应式与暗黑模式dark:bg-gray-800@media (prefers-color-scheme: dark) { ... }适配多主题

自定义规则的支持与限制

支持能力
  1. 正则表达式匹配：通过正则动态解析类名
  2. 动态 CSS 生成：根据匹配结果生成任意 CSS 属性
  3. 组合规则：支持多个规则叠加（如 px-4 + py-2 → padding: 1rem 0.5rem）
主要限制
限制类型说明
正则复杂度避免过于复杂的正则表达式，可能影响扫描性能
静态分析范围仅能识别构建时存在的类名（动态拼接类名如 class="mt-${size}" 无法被识别）
伪类与媒体查询需手动编写完整 CSS 片段，无法通过简写生成

常用自定义规则示例

1. 简写颜色值
// uno.config.js
rules: [
  [/^c-(.+)$/, ([, color]) => ({ color: `#${color}` })),
]

使用效果：

<div class="c-1890ff"></div> <!-- 生成 color: #1890ff -->
2. 自定义间距单位
rules: [
  [/^gap-(\d+)$/, ([, size]) => ({ gap: `${Number(size) * 4}px` }),
]

使用效果：

<div class="gap-2"></div> <!-- 生成 gap: 8px -->
3. 复合属性生成
rules: [
  [/^s-([a-z]+)-(\d+)$/, ([, type, size]) => ({
    'font-size': `${size}px`,
    'font-weight': type === 'bold' ? 700 : 400,
  })],
]

使用效果：

<span class="s-bold-16">加粗文本</span> 
<!-- 生成 font-size:16px; font-weight:700 -->
4. 动态引入图标
rules: [
  [/^icon-(.+)$/, ([, name]) => ({
    'background-image': `url(/icons/${name}.svg)`,
    'background-size': 'cover',
  })],
]

使用效果：

<div class="icon-user"></div> <!-- 加载 /icons/user.svg -->

配置自定义规则

完整配置示例：

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

export default defineConfig({
  presets: [
    presetAttributify(), // 支持属性化模式
    presetUno(),         // 核心预设
  ],
  rules: [
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d * 4}px` })], // 覆盖默认 margin 规则
    [/^fz-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px` })], // 自定义字体大小
  ],
  shortcuts: {
    'btn': 'px-4 py-2 bg-blue-500 text-white rounded', // 定义组合类
  }
})

总结：UnoCSS 的核心优势

特性Tailwind CSSUnoCSS
‌生成模式‌预生成全量类（支持 JIT）动态按需生成
‌配置复杂度‌高（预设规则固定）低（规则高度可定制）
‌构建速度‌较慢（尤其大型项目）极快（仅处理使用类）
‌生态系统‌成熟（社区资源丰富）新兴（灵活性优先）
avatar
文章
阅读
粉丝