Как я могу использовать tailwind-css для стилизации активного состояния Navlink (react-router-dom)?

Попробуй это. className = {px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? "bg-red-500": "bg-black-500"} }

Свойство className принимает либо строку, либо обратный вызов функции, который передается свойству isActive и возвращает строку или значение undefined.

Смотрите NavLink

declare function NavLink(
  props: NavLinkProps
): React.ReactElement;

interface NavLinkProps
  extends Omit<
    LinkProps,
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean; }) => string | undefined); // <--
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean; }) => React.CSSProperties);
}

Используйте функцию обратного вызова, чтобы принять свойство isActive и вернуть строку, содержащую классы CSS, которые вы хотите применить.

className = {({ isActive }) => [
    "px-2 py-2.5",
    "hover:bg-cprimary-300 hover:text-csecond-100",
    "rounded-md transition",
    isActive ? "bg-red-500" : "bg-black-500"
  ].join(" ")
}