unocss 生态

• unocss 官方文档
• unocss 中文文档
• unocss-preset-ease 预设动画样式

安装

pnpm add unocss -D

配置

根目录下创建 uno.config.ts 文件

import { defineConfig, presetAttributify, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetAttributify()],
  shortcuts: [
    ['flex-center', 'flex items-center justify-center'],
    ['flex-between', 'flex justify-between'],
    ['flex-end', 'flex items-end'],
    ['text-ellipsis', 'text-ellipsis overflow-hidden whitespace-nowrap'],
    ['wh-full', 'w-full h-full'],
  ],
})

在 main.ts 引入

import 'virtual:uno.css'

在 eslint.config.mjs 文件需添加校验配置

import ts from 'typescript-eslint'
import unocss from '@unocss/eslint-config/flat'

export default ts.config(
  unocss // 配置
)