Skip to content
Submitted almost 2 years ago

Expenses chart component

react, tailwind-css
Michael Chukwu•360
@Mike-Dave
A solution to the Expenses chart component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have successfully completed this challenge and I am open to receiving any feedback or corrections. After deployment, I don't know why the cyan coloris not displaying. Other than that I did enjoy working on this project.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    markus•2,760
    @markuslewin

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord