NavLink color is not changing using tailwind css

Question

<NavLink
  to={item.link}
  key={index}
  className={({ isActive }) => (isActive ? "text-oirOrange" : ' ')}
>
  <li className='cursor-pointer font-semibold text-oirBrown hover:text-oirOrange'>
    {item.text}
  </li>
</NavLink>

The active nav link color should change, but it is not changing. "text-oirOrange" class is getting added to the html but it is not affecting.

"oirOrange" is color that I have already declared.

Answer 1

If I understand the question/issue correctly you are wanting to add this "text-oiOrange" class to the list item (li) element, e.g. the text that is actually displayed. You can use the children render function for this to apply the active styling to the li element instead of the anchor tag that NavLink is rendering.

Example:

<NavLink to={item.link} key={index}>
  {({ isActive }) => (
    <li
      className={[
        "cursor-pointer font-semibold hover:text-oirOrange",
        isActive ? "text-oirOrange" : "text-oirBrown"
      ].join(" ")}
    >
      {item.text}
    </li>

  )}
</NavLink>