Using Variables in Vue Nuxt Tailwind

This is my loop

<template>
    <div>
        <!-- title -->
        <section
            class="pt-4 w-fit mx-32 grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-20 mt-4 mb-5">

            <tr v-for="product in products" :key="product.id">
                <div class="w-56 bg-white rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
                    <div v-for="(image, index) in product.images" :key="image.url">
                        <div v-if="index === 0">
                            <img :src="image.url" alt="" class="h-[14rem] w-72 object-cover rounded-xl">
                        </div>
                    </div>
                    <div class="px-2 py-3 w-60">
                        <p class="text-lg font-semibold text-black truncate block capitalize">{{ product.name }}</p>
                    </div>
                    <stars :numStars=product.stars :numReviews=product._count.reviews></stars>
                    <div class="flex items-center">
                        <p class="pl-2 text-lg font-bold text-black cursor-auto my-1">R$ {{ product.price }}</p>
                        <div v-for="(sticker, index) in product.stickers" :key="index">
                            <p>Sticker name: {{ sticker.name }}</p>
                            <p>Sticker discount: {{ sticker.discount }}</p>
                            <div :title=sticker.color></div>
                            <p class="">Sticker color: {{ sticker.color }}</p>
                            <p>Sticker text color: {{ sticker.textColor }}</p>
                        </div>

                    </div>

                </div>


            </tr>


        </section>
    </div>
</template>

im getting data from a api, that returns this in the browse (only the last product has sticker in this case, and i put random colors just to test):

how could i use sticker-color and text-color to use then dynamically, every product can have two stickers so it can be hard to use the colors, but even if someone knows how to do this with one sticker i will be very grateful, below is the layout im trying to reach:

>Solution :

Consider foregoing Tailwind altogether in this situation and instead use a inline style attribute to apply the dynamically-fetched colors:

<div :style="{ color: sticker.textColor, backgroundColor: sticker.color }">

This is because Tailwind needs to see classes as full unbroken strings at build time in source code but that is not possible if you are getting values dynamically from some other source at runtime.