I am currently working with a card component:
<template>
<div
class="z-50 flex w-[15vw] flex-col items-center justify-center gap-5 rounded-md border-2 border-gray-300 bg-[#f3f3f3] p-5 transition-all duration-300 hover:scale-105 hover:font-bold"
>
<div class="w-[100%]">
<div
:class="color"
class="flex w-fit items-center justify-center rounded-3xl px-2 text-sm text-white"
>
{{ collection }}
</div>
</div>
<div
class="flex w-[100%] flex-col items-center justify-center gap-2 text-2xl font-thin text-black"
>
<div class="italic">{{ question }}</div>
<div class="w-[100%] rounded-3xl border-2 border-gray-200"></div>
<div class="font-semibold">{{ answer }}</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
collection: String,
question: String,
answer: String,
color: String
})
</script>
<style lang="scss" scoped></style>
Here is an example of how I use it in my project:
<UsersFavoriteCard
:color="color"
collection="AsyncJs"
question="does it work"
answer="yes"
></UsersFavoriteCard>
const color = computed(() => {
const colors = ['orange', 'blue', 'green', 'amber', 'rose', 'teal']
const randomColor = colors[Math.floor(Math.random() * colors.length)].toLocaleLowerCase()
const randomRange = 300
const color = `bg-${randomColor}-${randomRange}`
console.log(color)
return color
})
After testing the function, it successfully generates colors such as: bg-red-300 bg-blue-300 bg-amber-300
However, there seems to be some inconsistency where only blue and green colors are being applied. For example, if the generated color is: bg-blue-300 or bg-green-300
the card element displays correctly with that color. But when the output is bg-red-300 or bg-rose-300, which are valid Tailwind colors, the element appears without any color until the page is refreshed to display either blue or green. Manually setting the color to color='bg-red-300' works without issues. Why does this inconsistency occur? Why do valid Tailwind colors generated by the function fail to work while manually set colors like blue and green always work?
I have experimented with various examples using Tailwind colors, and consistently found that manually set colors work, but those generated by functions do not.