本人在生产项目中使用 UnoCSS 已经快两年了。前段时间在公司无脑整理了培训文档和我常用的一些小技巧，现在将排除项目内部代码之外的内容分享出来。 ## 一、安装 ### 在 Vue3 + Vite 项目中安装安装 UnoCSS。 ```sh pnpm add -D unocss ``` 在 Vite 中注册插件。 ```ts // vite.config.ts import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ UnoCSS(), ], }) ``` 创建 `uno.config.ts` 文件，当然你也可以直接在 `vite.config.ts` 中进行简单配置。 ```ts // uno.config.ts import { defineConfig } from 'unocss' export default defineConfig({ // ...UnoCSS options } ``` 在 `mian.ts` 中导入。 ```ts // main.ts import 'virtual:uno.css' ``` ### 在 Nuxt 3 中安装安装 UnoCSS 。 ```sh pnpm add -D @unocss/nuxt ``` 在 Nuxt 中注册模块。 ```ts // nuxt.config.ts export default defineNuxtConfig({ modules: [ '@unocss/nuxt', ], }) ``` 创建 `uno.config.ts` 文件，当然你也可以直接在 `nuxt.config.ts` 中进行简单配置。 ```ts // uno.config.ts import { defineConfig } from 'unocss' export default defineConfig({ // ...UnoCSS options }) ``` 此外，除了 Vue 和 Nuxt，UnoCSS 还支持 React、Next、Remix、Astro、Svelte、Webpack、PostCSS Plugin、uni-app 等。 ## 二、UnoCSS 基础用法 ### 交互式文档 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/75c3e7da075741be953711c1bf061c46~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=VUR306YS1W9dJ9WPubuUUXjaj68%3D) 交互式文档实际演示如下内容： * flex * width * colors * mdn: * padding & margin ### 基础语法 * 文字 ```html

文字

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8b04a71a10354b97bc46fd0452a1c874~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=MfatUpNA%2F5yXcyJvdyewiongeAM%3D) * 边框 ```html

文字

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/30a025015cc248d7bd1d00c15c6b1f8d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=9sJLhs7c3Z4YscbRtLIi4d3WMtI%3D) * 边距

边距

![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/86512068afd34237b6bde1646ac36d5b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=B05pDamJe4fijJ8aDJ0hfyiGFuk%3D) * 宽高 ```html

宽高

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/677a0e90cfd64995962d3f2861a49782~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=nkthSslTgljnTmALeyrajTcB9YA%3D) * 颜色 ```html

背景

颜色

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3535b7740d1c409fb9ebf3cdcdea3b1f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=W1PGCuIY%2F2c8PFlSOrcQajBfvFA%3D) * flex布局 ```html

Flex 布局

flex-1

flex-2

flex-3

flex-1

flex-2

flex-3

flex-1

flex-2

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1b775b8d61fe410d9555a3b3f36d5401~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=i3YXLp5C616hl8WBkwd0T%2Fzuy2w%3D) * 定位 ```html

父元素

子元素

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f79e4ffda17648a795f55813f35c28ca~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=9xkRtcFetfOvR%2Fxb0GeAcIFtkns%3D) * 动画 ```html

动画

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/804ab85d8bfd418abffd4ccf2eb4ae39~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=IVdWDOJ8Vz93Jw%2BO9aXeR5eTn9o%3D) * important ```html

父元素

子元素

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fff3b394afcc4bdfa1c95ab734da55ab~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=EYAYdj3aJAP6WYnBkwtC1Lh9IDk%3D) ### IDE 插件提示 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3ed3ec85d4b949b8a811d402dde79a85~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=U0z9dJNS06VQBizQT9G3Dk9mJpk%3D) ## 三、Iconify SVG 官方文档：官方图标库： Icones 图标库： ### 安装 ```sh pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want] ``` 我个人常用的是：@iconify-json/carbon 和 @iconify-json/remix。如果你想开发模式下下载全部图标（它是按需编译的，不用担心编译后的体积）： ```sh pnpm add -D @iconify/json # 该全量包约为 130MB ``` 在 `uno.config.ts` 中配置 presetIcons 插件。 ```ts presetIcons({ extraProperties: { 'prefix': 'i-', 'display': 'inline-block', 'vertical-align': 'middle', // ... }, }) ``` ### UnoCSS 使用 SVG 图标 * 基础用法通过 class 使用 SVG 图标。 ```html

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/700e66741e3c4d3cb781541c7d1d7a88~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=B1GeEc1zU1YejqNMtoDljjQlcq0%3D) * 图标大小 ```html

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6cad942f1a714bd4b9fe2f0eb84c2914~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=79wBjQRg5oR9O5E0DezwBmeNw2U%3D) * 颜色 ```html

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4155247a88d048969f6b659376458963~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=%2FOap8IDQmfqJwNsZ3fXRQXuXLWo%3D) * 切换效果 ```html

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2f1dd5d0e04144fbbafdf31223cd69ca~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=5LPcGNbv3Um4I6sCWJWEPfJ7ZJA%3D) ### 本地SVG压缩如果需要进一步压缩本地 SVG 文件的体积，你可以安装 svgo 插件进行压缩。 ```sh pnpm add -g svgo ``` 通过命令：`svgo -f path -o path` 即可进行压缩处理。更多压缩语法与配置文件请参考： ## 四、UnoCSS Preset ### Icons preset 你可以通过这个插件来使用 SVG 图标，前面在 ## Iconify SVG 章节已经介绍过了。 ```ts // uno.config.ts import { defineConfig, presetIcons } from 'unocss' export default defineConfig({ presets: [ presetIcons({ /* options */ }), // ...other presets ], }) ``` 下面是一些常用的配置项，更多内容需要参考官方文档。 * 通过 `scale` 配置可以设置默认的缩放大小。 * 通过 `prefix` 可以设置 class 前缀。 * 通过 `extraProperties` 可以设置默认的 CSS 样式。这是我的常用配置： ```ts presetIcons({ scale: 1.2, prefix: 'i-', extraProperties: { display: 'inline-block', }, }) ``` 此外，该插件支持配置 CDN 加载、本地加载、按需加载和自定义 SVG 图标 class，具体参考官方文档：。 ### Attributify preset 该插件提供 html 标签的attribute 写法支持。 ```ts // uno.config.ts import { defineConfig, presetAttributify } from 'unocss' export default defineConfig({ presets: [ presetAttributify({ /* preset options */ }), // ... ], }) ``` 配置后无需通过声明 `class=""` 也可书写样式，并且支持组合写法。 ```html ``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c4306a9e42834c3a97566ee95aa0f1e2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=IsFILkSLZ%2FDlLli7DSVqy7YLmCQ%3D) 这样的写法在常规的 html 标签上没有问题，如果是针对自定义的组件，如果组件内部封装的属性与样式冲突，则可以通过 `un-` 的前缀避免这个问题。 ```html 与组件的 text 属性冲突使用前缀设置颜色，不会冲突 ``` 更多配置项和 TS 类型支持，请参考官方文档：。 ### Web Fonts preset UnoCSS 使用字体插件。 ```ts // uno.config.ts import { defineConfig, presetWebFonts } from 'unocss' export default defineConfig({ presets: [ presetWebFonts({ /* options */ }), ], }) ``` 该插件可以使用默认提供的字体，如 `google``bunny``fontshare` ，如果配置为 `none` 则使用系统默认字体。下面是我的常用字体配置： ```ts presetWebFonts({ fonts: { sans: 'Inter:400,600,800', mono: 'DM Mono:400,600', }, }) ``` 上面配置字体的写法为：`font-sans` 针对网络不好的环境或者需要自定义字体包的使用场景，插件支持通过 `customFetch` 手动配置： ```ts // uno.config.ts import { defineConfig } from 'unocss' import presetWebFonts from '@unocss/preset-web-fonts' import presetUno from '@unocss/preset-uno' import axios from 'axios' import ProxyAgent from 'proxy-agent' export default defineConfig({ presets: [ presetUno(), presetWebFonts({ // use axios with an https proxy customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data), }), ], }) ``` ### Rem to px preset UnoCSS 所有的样式均为 `rem` 单位（value: 16px），如果不需要 `rem` 单位，可以通过该插件转成 `px`。 ```ts // uno.config.ts import { defineConfig, presetRemToPx } from 'unocss' export default defineConfig({ presets: [ presetRemToPx(), // ...other presets ], }) ``` ## 五、UnoCSS Transformer ### Variant group transformer 该插件提供包裹多个 class 。 ```ts // uno.config.ts import { defineConfig, transformerVariantGroup } from 'unocss' export default defineConfig({ // ... transformers: [ transformerVariantGroup(), ], }) ``` ```html

``` 上面的代码等同于： ```html

``` ### Directives transformer 该插件提供在 css 里使用原子化 class。 ```ts // uno.config.ts import { defineConfig, transformerDirectives } from 'unocss' export default defineConfig({ // ... transformers: [ transformerDirectives(), ], }) ``` * 使用 `@apply` 或者 `--at-apply` 进行使用：如果不想用默认的 --at-apply ，可以通过配置参数修改。 ```css .custom-div { @apply text-center my-0 font-medium; } /* --at-apply 兼容性更好 */ .custom-div { --at-apply: text-center my-0 font-medium; } ``` * 使用 `@screen` 来开发响应式： ```css .grid { --uno: grid grid-cols-2; } /* @screen xs 会转成 --> @media (min-width: 320px) */ @screen xs { } @screen sm { } /* 也可以使用 lt 设置 max-width */ @screen lt-xs{ } /* 也可以使用 at 设置 and */ @screen at-xs{ } ``` * 如果你需要使用主题，可以使用 `theme()` css 函数： ```css .btn-blue { background-color: theme('colors.blue.500'); } ``` ### Attributify JSX transformer 插件支持在 JSX 合 TSX 中以属性写法写样式。 ```ts // uno.config.ts import { defineConfig, presetAttributify, transformerAttributifyJsx } from 'unocss' export default defineConfig({ // ... presets: [ // ... presetAttributify(), ], transformers: [ transformerAttributifyJsx(), // <-- ], }) ``` 使用举例： ```tsx export function Component() { return (

unocss

) } ``` ### Compile class transformer 插件支持将多个 class 编译成一个。 ```ts // uno.config.ts import { defineConfig, transformerCompileClass } from 'unocss' export default defineConfig({ // ... transformers: [ transformerCompileClass(), ], }) ``` 使用举例： ```html

``` 编译结果： ```html

``` ```css .uno-qlmcrp { text-align: center; } .uno-0qw2gr { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; } .uno-0qw2gr:hover { --un-text-opacity: 1; color: rgb(248 113 113 / var(--un-text-opacity)); } @media (min-width: 640px) { .uno-qlmcrp { text-align: left; } } ``` ## 六、UnoCSS 常用使用技巧 ### shortcuts 组合 class 通过 shortcuts 将多个 class 组合成一个。该配置通常用于全局样式、主题、背景等。 ```ts export default defineConfig({ shortcuts: [ { 'bg-main': 'bg-hex-eef5fc dark:bg-hex-0d1117', 'text-main': 'text-hex-555555 dark:text-hex-bbbbbb', 'text-link': 'text-dark dark:text-white ', 'border-main': 'border-truegray-300 dark:border-truegray-600', }, { 'text-title': 'text-link text-4xl font-800', 'nav-link': 'text-link opacity-70 hover:opacity-100 transition-opacity duration-200 cursor-pointer', 'prose-link': 'text-link text-nowrap cursor-pointer border-b-1 !border-opacity-30 hover:!border-opacity-100 border-neutral-500 hover:border-truegray-600 dark:border-neutral-500 hover:dark:border-truegray-400 transition-border-color duration-200 decoration-none', 'container-link': 'p-2 opacity-60 hover:opacity-100 cursor-pointer hover:bg-truegray-500 !bg-opacity-10 transition-colors transition-opacity duration-200', }, { 'hr-line': 'w-14 mx-auto my-8 border-solid border-1px !border-truegray-200 !dark:border-truegray-800', }, ] }) ``` 这是一个 Astro 项目中的一段示例代码 ```html

``` ### 响应式样式通过 `sm:xxx` 等写法即可快速实现响应式样式。如下面一段代码，在宽度大于 640px 时会隐藏菜单图标。 ```html

``` ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/be5f949fffcd44ed84fae61bcacabe25~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oiR5LiN5Y-r546L5bCP57qi:q75.awebp?rk3s=f64ab15b&x-expires=1772981396&x-signature=9p7LbQEuEeUE9bdpQBx5N6Pd%2Fbk%3D) 其他媒体查询breakpoints前缀和对应的宽度如下： * sm, 640px * lg, 1024px * xl, 1280px ### safelist与图标动态加载在菜单或者动态配置的图标，以及动态 class 场景下，需要预加载图标才能正确显示。可以通过如下方式实现： * 使用 safelist； ```ts import { defineConfig } from 'unocss' export default defineConfig({ safelist: [ 'i-ri-file-list-2-line', 'i-carbon-campsite', ], }) ``` * 列出所有组合的对象，然后动态引用； ```ts const classes = { icon1: 'i-ri-file-list-2-line', icon2: 'i-carbon-campsite' } ``` ```html

``` * 通过配置文件该方式，可以将所有的动态 class 放到单独的文件中，使用 `// @unocss-include`进行编译。也可以配置 filesystem 指定文件。 ```ts // uno.config.ts export default defineConfig({ content: { filesystem: [ 'src/**/*.css', ], }, }) ``` ### 自定义 class 规则通过配置 shortcuts 或者 rules 即可自定义规则。 * 通过 rules 即可覆盖默认的规则。 ```ts rules: [ // 覆盖默认的规则 ['font-bold', { 'font-weight': 700 }], // 正则生成规则 [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], ] ``` 也支持选择器、特殊符号等生成，更多写法参考文档： * 通过 shortcuts 可以将多个 class 组合为单个 class。 ```ts shortcuts: { // 组合多条 class 'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md', // 直接使用已经组合好的 class 'btn-green': 'btn text-white bg-green-500 hover:bg-green-700', // 单个 class 声明别名 'red': 'text-red-100', // 根据正则动态生成 class [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`], } ``` ### 自定义主题及覆盖通过配置 theme 可设置主题系统，默认提供 tailwind css 或者 windi css 的主题。 ```ts theme: { // ... bg colors: { 'veryCool': '#0000ff', // class="text-very-cool" 'brand': { 'primary': 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary" }, }, } ``` 使用时： ```html

链接

``` theme 配置支持覆盖媒体查询断点，如把 sm 修改为 320px。 ```ts theme: { // ... breakpoints: { sm: '320px', md: '640px', }, } ``` ### class 自定义颜色值如果 unocss 预设的颜色不能满足需求，可以通过如下方式自定义颜色值。 * 使用 class 直接声明颜色值，`class="bg-#000 bg-hex-fff"`； * 使用 attribute 写法直接声明颜色值，`bg="#000"`； ### 基于vueuse的黑暗模式 ```html ``` ### 常用 class 简写和写法 * flex 简写，`
`； * margin 和 padding 简写，如：`
`； * 宽高度简写，`
`； * 负数，`
`； * 圆角，`
`； * !important，`
`； * 鼠标样式，`
`； * 禁用，`
`；