演示

1
<div text="center 10 primary">你可以设置字体样式</div>
你可以设置字体样式
1
<div text-10 animate-bounce>轻松设置动画</div>
轻松设置动画
1
2
3
4
5
6
7
8
9
10
11
12
<div flex items-center justify-center gap-3>
<div>设置一个图标</div>
<div i-mdi-emoticon-cool-outline h-10 w-10></div>

<div flex="~ col" items-center>
<div i-mdi-emoticon-angry-outline animate="wobble count-infinite" h-15 w-15 bg-red></div>
<div>加点颜色?再设置个动画?</div>
</div>

<div i-line-md-moon-twotone-loop h-10 w-10 bg-primary></div>
<div>使用动画图标</div>
</div>
设置一个图标
加点颜色?再设置个动画?
使用动画图标
1
2
3
<div py-5 rounded-xl flex items-center justify-center bg-gradient-to-b from-blue to-primary>
<div text="10 white" tracking>来个渐变色</div>
</div>
来个渐变色
实现一个图片九宫格
1
2
3
4
5
6
7
8
9
10
11
12
13
<div mx-a mt-5 p-1 w-90 bg-white b="3 solid primary">
<div grid="~ cols-3" gap-1>
<img src="https://imba97.cn/uploads/2023/04/code-server-1.png" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/12/report-2023-3.png" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/12/report-2023-4.png" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/07/serialport-1-1.jpg" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/07/serialport-1-2.jpg" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/07/serialport-1-3.jpg" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2023/03/bitwarden-login-error-1.png" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2022/10/simple-zip-upload-1.png" m-0! w-30 h-30 object-cover>
<img src="https://imba97.cn/uploads/2018/08/switch_4.gif" m-0! w-30 h-30 object-cover>
</div>
</div>
其实不太适合这种大量重复的元素
做个好看的 Todo List
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div text="10 primary" font-bold>我的计划</div>
<div>
<div flex items-center gap-1>
<div i-ic-round-check-box h-8 w-8 bg-green></div>
<div text="5 gray-3" decoration="line-through">hexo-unocss</div>
</div>
<div flex items-center gap-1>
<div i-ic-round-check-box-outline-blank h-8 w-8></div>
<div text="5">浏览器标签墙</div>
</div>
<div flex items-center gap-1>
<div i-ic-round-check-box-outline-blank h-8 w-8></div>
<div text="5">数字游民</div>
</div>
</div>
我的计划
hexo-unocss
浏览器标签墙
数字游民

使用

安装插件和相关依赖(必选)

1
npm install hexo-unocss unocss @unocss/cli

使用图标

安装 icon(可选)

1
npm install @iconify/json

图标站:Icônes

配置

配置完全沿用 unocss 的配置,详情请参考 https://unocss.dev/config/

在根目录下新建 uno.config.ts,推荐以下配置。包含基础写法、属性写法、icon 的预设配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
presets: [presetUno(), presetAttributify(), presetIcons()],
content: {
pipeline: {
include: [/\.(md)($|\?)/]
}
},
cli: {
entry: {
patterns: ['source/**/*.md'],
outFile: 'source/css/uno.css'
}
},
theme: {
colors: {
primary: '#50528a'
}
}
})

自定义颜色 primary 后,即可使用 text-primarybg-primary

推荐 vscode 插件:antfu.unocss,可以显示具体生成的样式和颜色