当前位置：首页 > article >正文

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

article 2025/3/26 0:57:42

文章目录

一、什么是UnoCSS？
二、环境配置（Vite示例）
三、核心使用模式
- 3.1 自定义规则
- 3.2 原子化类应用
- 3.3 使用RegExp匹配器
四、高级功能解析
- 4.1 主题系统
- 4.2 响应式与深色模式
五、实战案例：构建现代按钮组件
六、性能优化技巧
七、常见问题排查
八、生态推荐

在这里插入图片描述

一、什么是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>