It's because .bg-cyan-700 is declared before .bg-softRed in the generated CSS of Tailwind. It doesn't matter if you write className="bg-softRed bg-cyan-700" or className="bg-cyan-700 bg-softRed", the red will always override the cyan.
You could instead write:
<div className={`${items.day === "wed" ? "bg-cyan-700" : "bg-softRed"}`} />
That way, the logic applies either cyan or red!
Marked as helpful
0
Michael Chukwu• 360
@Mike-Dave
Posted
@markuslewin Thank you for the feedback. I agree with what you wrote and will be implementing it as well.
1
