unocssを使用した記録

インストール：pnpm add unocss -D

main でインポート：import 'virtual:uno.css'

vite で unocss を設定する

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import UnoCss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [UnoCss(), vue(), vueJsx()],
})

uno.config.ts を設定する

// uno.config.ts
import {
  defineConfig, presetAttributify, presetIcons,
  presetTypography, presetUno, transformerAttributifyJsx,
} from 'unocss'
export default defineConfig({
  theme: {
  },
  shortcuts: {
    // ここにグローバル共通スタイルを記述できます
    '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(),
  ],
})

src ディレクトリに shims.d.ts を作成し、未識別の unocss 属性に対して TS の宣言を行います。unocss を記述する際に属性がエラーになる場合は、ここに対応する属性の型を追加する必要があります。

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
  }
}