Кастомный пресет UnoCSS на Vue 3. Расширяет presetUno() — добавляет динамические классы для отступов, ширины и высоты с шагом 2px(можно менять) и поддержкой дробных значений (0.5, 1.5, 2.5 и т.д.).

Установка npm install -D ac-unocss-preset

Подключение

//uno.config.ts
import presetMini from '@unocss/preset-mini'
import acUnocssPreset from 'ac-unocss-preset'
import { defineConfig } from 'unocss'

export default defineConfig({
  blocklist: [
    'container',
  ],
  presets: [
    presetMini(),
    acUnocssPreset(),
  ]
})

Добавляем плагин UnoCSS в vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'

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

Импортируем стили в main.ts

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import 'virtual:uno.css'

createApp(App).mount('#app')

Доступны стандартные классы UnoCSS,

<div class="flex justify-center items-center">

</div>

Динамические классы отступов (маргин/паддинг), поддерживают значение 0, 0.5, 1, 1.5, 2, 2.5, 3 ...

<div class="mr-1.5">margin-right: 1.5px</div>
<div class="mt-2">margin-top: 2px</div>
<div class="pt-3">padding-top: 3px</div>
<div class="pb-2.5">padding-bottom: 2.5px</div>

По умолчанию переменная отступа = 1px. Можно изменить в настройках

import presetMini from '@unocss/preset-mini'
import acUnocssPreset from 'ac-unocss-preset'
import { defineConfig } from 'unocss'

export default defineConfig({
blocklist: [
  'container',
],
presets: [
  presetMini(),
  acUnocssPreset({indent:10}),
]
})

Динамические классы высоты/ширины, поддерживают указанные единицы измерения высоты('px','%','svh','vh') / ширины('px','%','svw','vw'). По умолчанию единица измерения px.

<div class="h-100svh">height: 100svh</div>
<div class="h-100">height: 100px</div>