Styling Navlink using Tailwind css

Question

I am trying to add tailwind-css to Navlink(react-router-dom). I want to add active style. To add active styles I can use

<NavLink to="/faq" activeStyle={{fontWeight: "bold",color: "red"}}>
  FAQs
</NavLink>

Is there a way to do this with tailwind-css, I don't want to use css, maybe something like this?

<NavLink to="/faq" className={`${active?'font-bold text-red':'text-gray-900'}...`}>
  FAQs
</NavLink>

Answer 1

NavLink component has an activeClassName property.

https://reactrouter.com/web/api/NavLink