CODEWITHSUNDEEP
reactjsnavbartailwind-cssclassname
Elis Porter
Elis Porter

Reputation: 11

NavLink activeClassName not working with Tailwind CSS

I am trying to create an active class for the navbar link by the text does not change after selection. I'm just wondering where I might be going wrong.

        <NavLink
            exact
            to="/"
            activeClassName="text-white"
            className="inflex-flex items-center py-6 px-3 mr-4 text- 
            red-200 hover:text-green-800 text-4xl font-bold cursive 
            tracking-widest"
            activeClassName="text-black"
          >
            Home
          </NavLink>
          <NavLink
            to="/project"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Projects
          </NavLink>
          <NavLink
            to="/post"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Blog Posts
          </NavLink>
          <NavLink
            to="/about"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >

Upvotes: 1

Views: 2531

Answers (3)

ISLAM RAFIKUL
ISLAM RAFIKUL

Reputation: 1

className={({ isActive }) => isActive ? "text-blue-700 font-bold underline" : "" }

Upvotes: 0

Ed Lucas
Ed Lucas

Reputation: 7355

It's possible that your link's hover color is overriding the text color. You could try adding red as a hover color for the active state:

activeClassName="text-red-100 hover:text-red-100 bg-red-700"

Upvotes: 0

PCPbiscuit
PCPbiscuit

Reputation: 603

Try doing

activeClassName='!text-red-100 !bg-red-700'

Upvotes: 1

Related Questions