It seems that the recommended best practice, once you've added the color with its shades in tailwind.config.ts, is to add the color value to ui.safelistColors in the nuxt.config.ts. Then, you can apply the color name directly to the component. nuxt.config.ts :

export default defineNuxtConfig({
    ui: {
        safelistColors: ['variantred']
    }

In the component file :

<template>
  <UButton color="variantred">Button</UButton>
</template>