UnoCSS极速入门：下一代原子化CSS引擎实战指南

---

一、什么是UnoCSS？

UnoCSS 是一款由Anthony Fu开发的即时原子化 CSS引擎，凭借其卓越的性能表现（比 Tailwind 快 5 倍）和灵活的扩展性，正在成为现代 Web 开发的新宠。与传统 CSS 框架不同，它通过智能扫描源代码按需生成样式，实现零运行时开销的极致体验。

二、环境配置（Vite示例）

npm install -D unocss @unocss/vite

vite.config.ts 配置：

import Unocss from '@unocss/vite'

export default {
  plugins: [
    Unocss({
      // 配置选项
    })
  ]
}

三、核心使用模式

3.1 自定义规则

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

这将向你的项目添加一个新的 CSS 工具 m-1。由于 UnoCSS 是按需的，因此除非你在代码库中使用它，否则它不会执行任何操作

3.2 原子化类应用

<div class="m-1">Hello</div>

将检测到 m-1 并生成以下 CSS：

.m-1 { margin: 1px; }

3.3 使用RegExp匹配器

为了使其更加灵活，你可以通过将规则的第一个参数（我们称之为匹配器）更改为 RegExp，将主体更改为函数，使规则动态化，例如：

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],//删除此行，添加下面一行
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

通过这样做，现在你可以拥有任意外边距工具，例如 m-1、m-100 或 m-52.43。再说一次，UnoCSS 仅在你使用它们时生成它们。

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

四、高级功能解析

4.1 主题系统

theme: {
  colors: {
    primary: '#4f46e5',
    secondary: '#a855f7'
  },
  breakpoints: {
    sm: '640px',
    lg: '1024px'
  }
}

4.2 响应式与深色模式

<div class="flex flex-col sm:flex-row">
  <div class="dark:text-white/80 bg-white dark:bg-gray-900">自适应主题</div>
</div>

五、实战案例：构建现代按钮组件

<button class="
  px-4 py-2 
  bg-gradient-to-r from-blue-500 to-purple-600
  text-white font-semibold
  rounded-lg shadow-md
  hover:shadow-lg
  transition-all
  active:scale-95
  disabled:opacity-50
">
  点击交互
</button>

六、性能优化技巧

1. 使用 @unocss/inspector 进行样式审查
2. 通过 presetIcons 集成图标系统
3. 配置 safelist 预生成关键样式
4. 结合 criticalCSS 实现首屏优化

七、常见问题排查

• 样式未生效：检查类名拼写和配置文件加载
• 生产环境丢失样式：确保构建流程正确集成
• 动态类名处理：使用 safelist 或 whitelist 预定义

八、生态推荐

• @unocss/preset-typography：排版系统
• @unocss/preset-web-fonts：Web字体集成
• @unocss/preset-attributify：属性化模式支持

---

立即体验UnoCSS的优势：

npx degit antfu/vitesse my-unocss-app

通过这篇指南，您已掌握 UnoCSS 的核心用法。其按需生成的特性可减少80%的CSS 体积，智能预设系统让样式开发效率提升数倍。赶紧在您的下一个项目中尝试这个革命性的 CSS 引擎吧！