Tailwind classes in tv object not compiled (Tailwind V4)

[ISOR3X]

Hi,

I have been struggling for a couple of hours now trying to get Tailwind Variants to work for my project. I am using my own colors, defined in my main.css file with names such as --color-red.
Unfortunatly it seems that all the class names generated by the different tailwind variants do not get their related css generated for them.
For example this is the result of a button using the code provided below. As you can see the class names are generating correctly, but there is no css generated for them.

I am not sure if this is a Tailwind V4 or Tailwind Variants issue but it is quite bothering me. Does anyone know how to solve this issue or if there is any workaround for it?

<script lang="ts">
import type {VariantProps} from "tailwind-variants";
import {tv} from "tailwind-variants";
import {colors} from "@/utils/colors"; // a string array of color names

export const button = tv({
  base: 'rounded-full px-4 py-2 inline-flex place-items-center place-content-center',
  variants: {
    color: {
      ...Object.fromEntries(
          colors.map(c => [c, `bg-${c}`])
      )
    },
    variant: {
      filled: '',
      tinted: '',
      plain: '',
      gray: '',
    },
  },
  defaultVariants: {
    color: 'blue',
    variant: 'filled'
  },
  compoundVariants: [
    ...colors.map((c: string) => ({
      color: c,
      variant: 'filled',
      class: `text-white bg-[var(--color-${c})]`
    })),
    ...colors.map((c: string) => ({
      color: c,
      variant: 'tinted',
      class: `text-[var(--color-${c})] bg-[var(--bg-${c})]/15`
    })),
  ]

})


type ButtonVariants = VariantProps<typeof button>

interface ButtonProps extends /* @vue-ignore */ ButtonVariants {
  label?: string
  iconLeading?: string
  iconTrailing?: string
  color?: ButtonVariants['color']
  variant?: ButtonVariants['variant']

}
</script>

<script setup lang="ts">
import {Icon} from "@iconify/vue";


const props = defineProps<ButtonProps>()
</script>

<template>
  <button :class="button({color: props.color, variant: props.variant})" >
    <Icon v-if="iconLeading" :icon="iconLeading" class="size-6 mr-2"/>
    <span v-if="label">{{ label }}</span>

    <Icon v-if="iconTrailing" :icon="iconTrailing" class="size-6 ml-2"/>
  </button>
</template>

<style scoped>

</style>

Thanks a lot in advance.

[ISOR3X]

So the issue seems to be that since there are variables in the name Tailwind doesnt recognize them. Makes sense I guess, don't know why it took me that long to figure out. I will close this but if anyone has suggestions on what the best way is to solve this please let me know.

[CanRau]

I'd say on option might be adding all those colors to safeList tho it's not yet supported in v4 tailwindlabs/tailwindcss#14462 😅