UnoCSS 是一个 即时原子化 CSS（Atomic CSS / Utility-first CSS）引擎，类似于 Tailwind CSS 或 Windi CSS，但更轻量、灵活、性能高。本篇随笔结合项目代码介绍在Vant4+Vue3+TypeScript的H5移动前端使用UnoCSS。
UnoCSS 它的核心理念是：
-
原子化 CSS ：每一个 class 对应一条 CSS 规则，例如
p-4就表示padding: 1rem。 -
按需生成：只有在 HTML / JS / Vue / React / Svelte 中使用到的类，UnoCSS 才会生成对应的 CSS，避免冗余。
-
零配置可用：开箱即用，同时支持高度自定义。
-
极速编译：使用静态分析和即时生成技术，CSS 构建速度非常快。
官网介绍：https://unocss.dev
1、UnoCSS 核心概念
原子类（Atomic Class）
每个 class 对应一个 CSS 属性，例如：
<div class="p-4 text-red-500 bg-gray-100"></div>对应 CSS：
div { padding: 1rem; color: #f56565; background-color: #f7fafc; }Preset（预设）
预定义的一套 class 规则，例如：
-
presetWind3→ 类似 Tailwind 风格 -
presetAttributify→ 属性化写法<div p="4" text="red-500"></div> -
presetIcons→ 图标类自动生成
Shortcuts（快捷类）
将多个 class 合并为一个，例如：
shortcuts: {
btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}变体（Variants）
前缀用于状态或响应式：
-
hover:bg-blue-500→ 悬停时背景蓝色 -
md:flex→ 中屏及以上显示 flex 布局 -
dark:text-white→ 暗黑模式下字体白色
UnoCSS = 原子化 + 按需生成 + 极速编译 + 高度可定制的 CSS 工具库
2、如何掌握UnoCSS
要熟练使用 UnoCSS ，你需要掌握它背后的 原子化 CSS 规则和标识符 。其实，UnoCSS 并没有发明新的 CSS 属性，它是把 CSS 属性 + 值 + 状态/变体 封装成原子类（class），所以掌握 UnoCSS 的标识，核心就是理解 CSS 属性、常用缩写和变体。我给你总结一个体系：
核心 CSS 属性标识（必会）
这些几乎是每个 UnoCSS 项目都会用到的：
| 类名示例 | 对应 CSS | 说明 |
|---|---|---|
p-4 |
padding: 1rem |
内边距 |
pt-2 |
padding-top: 0.5rem |
上内边距 |
m-3 |
margin: 0.75rem |
外边距 |
mt-1 |
margin-top: 0.25rem |
上外边距 |
w-24 |
width: 6rem |
宽度 |
h-32 |
height: 8rem |
高度 |
max-w-md |
max-width: 28rem |
最大宽度 |
min-h-screen |
min-height: 100vh |
最小高度 |
text-sm |
font-size: 0.875rem |
字体大小 |
font-bold |
font-weight: 700 |
字重 |
text-center |
text-align: center |
文本对齐 |
leading-6 |
line-height: 1.5rem |
行高 |
tracking-wide |
letter-spacing: 0.05em |
字间距 |
text-red-500 |
color: #f56565 |
字体颜色 |
bg-gray-100 |
background-color: #f7fafc |
背景色 |
border |
border-width: 1px |
边框 |
border-gray-300 |
border-color: #d2d6dc |
边框颜色 |
rounded |
border-radius: 0.25rem |
圆角 |
rounded-lg |
border-radius: 0.5rem |
大圆角 |
shadow-md |
box-shadow: 0 4px 6px -1px rgba(...) |
阴影 |
核心思路：属性缩写 + 数值/颜色/尺寸 + 状态/变体
常用状态 / 伪类变体
UnoCSS 可以直接在 class 前加状态：
| 前缀 | 说明 | 示例 |
|---|---|---|
hover: |
鼠标悬停 | hover:bg-blue-500 |
focus: |
获焦 | focus:ring-2 |
active: |
激活 | active:scale-95 |
dark: |
夜间模式 | dark:text-white |
sm: / md: / lg: |
响应式断点 | md:flex |
可以组合：
hover:md:bg-red-500→ 在中屏及以上，鼠标悬停时背景红色
属性缩写规则（UnoCSS vs Tailwind 很类似）
-
尺寸 ：
w-24,h-32,min-w-full -
间距 ：
p-4,px-2,mt-1,my-6 -
字体 ：
text-sm,font-bold,leading-6 -
颜色 ：
text-red-500,bg-blue-200,border-gray-300 -
边框 ：
border,border-t,border-l-2,rounded,rounded-full -
阴影/动画 ：
shadow,shadow-lg,animate-bounce -
布局 ：
flex,grid,justify-center,items-start,gap-4 -
定位 ：
absolute,relative,top-4,left-0
高级标识（可选）
-
图标 ：
i-mdi-home（需要presetIcons） -
属性风格 ：
p="4" text="red-500"（需要presetAttributify） -
自定义规则 / shortcuts：
shortcuts: {
btn: 'px-4 py-2 rounded bg-blue-500 text-white'
}使用：<button class="btn">点击</button>3、在Vite+Vue3+TS+Vant4的H5移动前端使用UnoCSS
在Vite的移动前端项目中使用UnoCSS，和其他的操作一样，先安装在项目依赖库中
pnpm install -D unocss一般我们还会同时使用它的预设图标处理，因此增加多两个类库。
pnpm install -D @unocss/preset-icons @iconify-json在 uno.config.ts 中配置 presetIcons 插件。图标预设: https://unocss.dev/presets/icons
presetIcons({
extraProperties: {'display': 'inline-block',
'vertical-align': 'middle',
// ...
},
})iconify 生态的图标都可以使用，具体可以在这里查找 Iconify（https://icones.js.org/） - 本项目推荐图标库。它是统一的图标框架，超过 150 多个图标集，和 200,000 个开源矢量图标，并且会定期更新图标。您可以在 iconify 或者 icones 中看到所有的图标集。
在VSCode下使用预设的图标集合，如下所示。
在vite.config.ts 配置：
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
Unocss()
]
})在 main.ts 中导入使用。
import 'virtual:uno.css'
import '@unocss/reset/tailwind-compat.css'在界面代码中class里面使用即可
<div class="p-4 text-red-500 bg-gray-100 rounded-lg">
Hello UnoCSS
</div>在你的 uno.config.ts 或 uno.config.js 中进行配置UnoCSS 即可。
import { defineConfig, presetUno } from 'unocss'
import { presetWind3 } from 'unocss/preset-wind3'
export default defineConfig({
presets: [
presetWind3 (),
// ...其他 preset
],
})一般来说会比这个更多一些内容。
而一般VSCode 安装插件UnoCSS后，
UnoCSS\](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件
VSCode里面都有智能提示的，方便使用的同时也有助于了解UnoCSS的具体语法细节，如下我的项目所示。
生成的H5端界面效果如下所示
消息详细界面中，也是统一使用了这样的样式处理方式。
```