F
Filament•2w ago
Rolland

custom component background color

I am wondering why the background color is not applying when I use tailwind class. I have installed and configure custom theme and i have installed tailwindcss. I am on laravel 12. method 1: 
<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div
        class="h-full transition-all duration-300"
        :style="`width: ${strength}%`"
        :class="{
            'bg-red-500': strength < 40,
            'bg-yellow-500': strength >= 40 && strength < 70,
            'bg-green-500': strength >= 70
        }"
    ></div>
</div>
<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div
        class="h-full transition-all duration-300"
        :style="`width: ${strength}%`"
        :class="{
            'bg-red-500': strength < 40,
            'bg-yellow-500': strength >= 40 && strength < 70,
            'bg-green-500': strength >= 70
        }"
    ></div>
</div>
Working code method 2: 
<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
     <div
            class="h-full transition-all duration-300"
            :style="`width: ${strength}%; background-color: ${
                strength < 40
                    ? '#ef4444'  /* red-500 */
                    : (strength >= 40 && strength < 70
                        ? '#eab308'  /* yellow-500 */
                        : '#22c55e'  /* green-500 */
                    )
            }`"
     ></div>
</div>
<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
     <div
            class="h-full transition-all duration-300"
            :style="`width: ${strength}%; background-color: ${
                strength < 40
                    ? '#ef4444'  /* red-500 */
                    : (strength >= 40 && strength < 70
                        ? '#eab308'  /* yellow-500 */
                        : '#22c55e'  /* green-500 */
                    )
            }`"
     ></div>
</div>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?