UnoCSS 原子化样式

Slidev 内置 UnoCSS 原子化样式引擎：不写一行 CSS，靠 class 名即得样式，排版、配色、布局信手拈来，与 Tailwind 同思路但更快更小。

原子化样式思路

传统 CSS 写样式 → 原子化 CSS 直接组合工具类：

传统写法	UnoCSS 写法
`style="color:red"`	`text-red-500`
`style="padding:1rem"`	`p-4`
`style="display:flex"`	`flex`

类名即声明，组合即布局，无需定义 CSS 规则。

常用原子类

间距

类	效果
`p-4`	四周内边距 1rem
`px-6`	水平内边距
`py-2`	垂直内边距
`m-4`	外边距
`gap-4`	网格/弹性间距

文本

类	效果
`text-2xl`	字号 2xl
`text-red-500`	文字颜色
`font-bold`	加粗
`text-center`	居中
`leading-8`	行高

背景

类	效果
`bg-blue-500`	背景色
`bg-opacity-50`	背景透明度
`rounded-lg`	圆角
`shadow-lg`	阴影

布局

类	效果
`flex`	弹性布局
`grid`	网格布局
`grid-cols-2`	两列网格
`justify-center`	主轴居中
`items-center`	交叉轴居中
`w-1/2`	宽度 50%

在幻灯片中使用

配合 MDC 语法给元素附加样式：

markdown

::: div { .flex .gap-4 .items-center }
  左侧内容
:::

或直接写在 HTML 元素上：

html

<div class="flex gap-4 items-center">
  <span class="text-2xl font-bold text-red-500">重点</span>
</div>

预设与规则

UnoCSS 内置大量预设：

预设	覆盖范围
间距	边距、内边距、宽高
排版	字号、字重、颜色、对齐
布局	flex、grid、定位
视觉	圆角、阴影、透明度、动效
响应式	断点前缀（`sm:` `md:` `lg:`）

开箱即用，无需额外安装。

自定义 UnoCSS 规则

在 uno.config.ts 中扩展自定义规则：

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno()],
  rules: [
    ['brand', { color: '#e11d48' }],
    [/^size-(\d+)$/, ([, d]) => ({ width: `${d}px`, height: `${d}px` })],
  ],
})

写法	效果
静态规则	`brand` 类直接应用颜色
动态规则	`size-20` 按参数生成尺寸

使用建议

多用原子类：避免写一页一个 <style>，类名即文档
组合优先：flex + items-center + gap-4 一行搞定垂直居中布局
少量自定义：项目级规则放 uno.config.ts，全局复用
配合 scoped CSS：复杂场景（动画、伪类）仍可回归 <style scoped>

UnoCSS 把样式变成「写类名」而非「写 CSS」，让幻灯片排版更高效、更一致，是 Slidev 页面设计的隐藏利器。

UnoCSS 原子化样式 ​

原子化样式思路 ​

常用原子类 ​

间距 ​

文本 ​

背景 ​

布局 ​

在幻灯片中使用 ​

预设与规则 ​

自定义 UnoCSS 规则 ​

使用建议 ​