Recording the use of unocss once.

Installation: pnpm add unocss -D

Import in main: import 'virtual:uno.css'

Configure unocss in vite:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import UnoCss from 'unocss/vite'

export default defineConfig({
  plugins: [UnoCss(), vue(), vueJsx()],
})

Configure uno.config.ts:

// uno.config.ts
import {
  defineConfig, presetAttributify, presetIcons,
  presetTypography, presetUno, transformerAttributifyJsx,
} from 'unocss'

export default defineConfig({
  theme: {
  },
  shortcuts: {
    // Global common styles can be placed here
    'h-btn': 'h-48px w-100% bg-#5C33BE b-none text-white rounded-8px',
  },
  safelist: [],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      extraProperties: { 'display': 'inline-block', 'vertical-align': 'middle' },
    }),
    presetTypography(),
  ],
  transformers: [
    transformerAttributifyJsx(),
  ],
})

Create shims.d.ts under src to declare unocss attributes that are not recognized by TS. If attributes are causing errors when writing unocss, you need to add the corresponding attribute types here.

import * as Vue from 'vue';

declare module 'vue/types/vue' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    flex?: boolean
    relative?: boolean
    text?: string
    grid?: boolean
    before?: string
    after?: string
    shadow?: boolean
    w?: string
    h?: string
    bg?: string
    rounded?: string
    fixed?: boolean
    b?: string
    z?: string
    block?: boolean
    'focus:shadow'?: boolean
  }
  interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {
    w?: string
    h?: string
  }
}