NavLink activeClassName not working with Tailwind CSS-CodePudding

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

CodePudding user response：

Try doing

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

CodePudding user response：

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"