Adding a className dynamically in React.js with Tailwind.css-CodePudding

Let's say I have a React component that gets the Tailwind class name from props for example :

import React from "react";

export default function Header({navColor}) {

  return (
    <nav
    className="flex justify-center items-center text-white  text-xl h-14"> //I want to add a class that it's name is the (navColor) value to the nav tag 
      TEST
    </nav>
  );
}

How can achieve this?

CodePudding user response：

You can use Template literals to achieve that

Use ${} inside backticks ``

<nav
    className={`flex justify-center items-center text-white  text-xl h-14 ${navColor}`}> 
      TEST
</nav>