react-router-domtailwind-css

Styling Navlink using Tailwind css

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>
Solution

  • V6 of React Router does not have the activeClassName property anymore. Here's how to style NavLink with Tailwind with the new version of ReactRouter and Remix

     <NavLink
    to="tasks"
     className={({ isActive }) =>
         isActive ? activeClassName : undefined
        }
     >
     Tasks
  </NavLink>

    Taken from here https://remix.run/docs/en/v1/api/remix#navlink