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:
Working code
method 2:
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>