React Router Active NavLink with Tailwind CSS

In this tutorial, we will see how to utilize active navlinks in React.js with Tailwind CSS, using React Router 6.

Tool Use

React JS

Tailwind CSS

React router

First you need to setup react project with tailwind css. You can install manually or you read below blog.

How to install Tailwind CSS in React

Install & Setup Vite + React + Typescript + Tailwind CSS 3

Example 1

React router with tailwind css active navlink. By default, an active class is added to a <NavLink> component when it is active so you can use CSS to style it.

@tailwind base;
@tailwind components;
@tailwind utilities;

.active{
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

Root.tsx / Home.tsx

import { NavLink } from "react-router-dom";

export default function Root() {
  return (
    <>
      <nav className="container flex justify-around py-8 mx-auto bg-white">
        <div>
          <h3 className="text-2xl font-medium text-blue-500">LOGO</h3>
        </div>
        <div className="space-x-8">
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/contact">Contact US</NavLink>
        </div>
      </nav>
    </>
  );
}

Example 2

React router active navlink using className with tailwind css.

import { NavLink } from "react-router-dom";

export default function About() {
  return (
    <>
      <nav className="container flex justify-around py-8 mx-auto bg-white">
        <div>
          <h3 className="text-2xl font-medium text-blue-500">LOGO</h3>
        </div>
        <div className="space-x-8">
          <NavLink
            to="/"
            className={({ isActive }) =>
              isActive ? "text-blue-700 font-bold" : ""
            }
          >
            Home
          </NavLink>
          <NavLink
            to="/about"
            className={({ isActive }) =>
              isActive ? "text-blue-700 font-bold" : ""
            }
          >
            About
          </NavLink>
          <NavLink
            to="/contact"
            className={({ isActive }) =>
              isActive ? "text-blue-700 font-bold" : ""
            }
          >
            Contact US
          </NavLink>
        </div>
      </nav>
    </>
  );
}

You can also use shorthand method.

import { NavLink } from "react-router-dom";

export default function About() {
  const activeLink = "text-blue-700 font-bold";
  return (
    <>
      <nav className="container flex justify-around py-8 mx-auto bg-white">
        <div>
          <h3 className="text-2xl font-medium text-blue-500">LOGO</h3>
        </div>
        <div className="space-x-8">
          <NavLink
            to="/"
            className={({ isActive }) => (isActive ? activeLink : "")}
          >
            Home
          </NavLink>
          <NavLink
            to="/about"
            className={({ isActive }) => (isActive ? activeLink : "")}
          >
            About
          </NavLink>
          <NavLink
            to="/contact"
            className={({ isActive }) => (isActive ? activeLink : "")}
          >
            Contact US
          </NavLink>
        </div>
      </nav>
    </>
  );
}

Tool Use

Example 1

Example 2

saim ansari