How do you use tailwind-variants to manage reusable component styles in Tailwind v4?

<script setup>
const buttonVariants = tv({
  base: 'px-4 py-2 rounded font-medium',
  variants: { variant: { primary: 'bg-blue-500 hover:bg-blue-600' } }
})
</script>

<template>
  <button :class="buttonVariants({ variant: 'primary' })">Click</button>
</template>