I am coding a button class with tailwind in react which manages 3 colors of buttons (white, blue-navy and gray). A secondaryColor() function manages the color of the text inside the button. This function actually return the opposite color of the button. In the tailwind code, there is a ternary condition which handles the hover attribute of the button.

The fact is, the code works pretty well without the ternary condition but when I add this section, white button has no background color and the border color is the default one for all buttons.

const Button = ({content, color, borderColor}) => {
/* console.log("I need this line make the code work)"*/

    return (
        <button>
            <div className={`h-9 px-3 mx-4
                flex items-center
                bg-${color}
                text-${secondaryColor(color)}
                border-${borderColor}
                border-2 rounded-md
                ${color === "white" || color === "gray" ?
                "hover:bg-blue-navy hover:text-white" :
                "hover:bg-white hover:text-blue-navy"}
            `}>
                {content}
            </div>
        </button>
    );

};

export default Button;

Here you can find the code which initiates the buttons :

<Button content="Button 1" color="white" borderColor="white"/>
<Button content="Button 2" color="blue-navy" borderColor="white"/>

The two following images show how it should work without the commentary ligne but it works only when there is the commentary line.

Works perfectly when button 1 is hover :

These or the images when there is no commentary line :

You can notice when button 2 is hover that the border color is the default one. (a very light gray)

And finally, If I nom run start with the commentary and delete it when the server is still running; nothing happens. But If I restart the server then, changes apply.

If anyone can help me through I would be very glad. thank you !