What's the Tailwind v4 pattern for component-driven utility extraction?

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

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