Overriding styles
Append extra classes at the call site with class or className. Nothing is dropped from the recipe.
Single component
Pass class or className when you call the recipe. Both keys are equivalent; uv concatenates them after the recipe classes.
import { uv } from 'unocss-variants';
const button = uv({
base: 'font-semibold color-white py-1 px-3 rounded-full active:opacity-80',
variants: {
color: {
primary: 'bg-blue-500 hover:bg-blue-700',
secondary: 'bg-purple-500 hover:bg-purple-700',
success: 'bg-green-500 hover:bg-green-700',
error: 'bg-red-500 hover:bg-red-700'
}
}
});
button({
color: 'secondary',
class: 'bg-pink-500 hover:bg-pink-500'
});
// font-semibold color-white py-1 px-3 rounded-full active:opacity-80 bg-purple-500 hover:bg-purple-700 bg-pink-500 hover:bg-pink-500
The secondary background is still in the string. To make pink win, prefix the override (or the variant) with uno-layer-uv: — see Layers.
uv({ base: 'px-4 py-2 rounded' })({ class: 'px-2 py-4 rounded-lg' });
// px-4 py-2 rounded px-2 py-4 rounded-lg
Slots
Pass overrides to the slot function you want to change:
UnoCSS Variants lets you reuse recipes instead of copying class strings, and keeps every variant typed.
Ketut Gabler
Full-stack developer
<script setup>
const { base, avatar, wrapper, description, infoWrapper, name, role } = card();
</script>
<template>
<figure :class="base({ class: 'bg-purple-100 dark:bg-purple-800' })">
<img
:class="avatar()"
src="/images/intro-avatar.png"
alt=""
>
<div :class="wrapper()">
<!-- ... -->
<div :class="name({ class: 'color-purple-500 dark:color-purple-200' })">
Ketut Gabler
</div>
<div :class="role({ class: 'dark:color-purple-100' })">
Full-stack developer
</div>
</div>
</figure>
</template>
base({ class: 'bg-purple-100 dark:bg-purple-800' });
// md:flex bg-background-muted rounded-xl p-8 md:p-0 bg-purple-100 dark:bg-purple-800
name({ class: 'color-purple-500 dark:color-purple-200' });
// text-sm color-sky-500 dark:color-sky-400 color-purple-500 dark:color-purple-200
Do not rely on card({ class: '...' }).base() — the root class is not applied to slots on the published 1.5.0 build. Call base({ class: '...' }) instead.