How do I enable the active variant in tailwindcss? (version 3.1)

Question

I'm trying to convert the rest of my css into tailwindcss and I've been running into this blocker that prevents the active element from displaying as a different color.

   <!--index.html-->     <button class="tablinks" onclick="aboutSec(event, 'About')" id="default"><p class="active:text-pink-800 hover:text-yellow-500 transition text-3xl font-bold p-5">About</p></button>

As shown in the html code I want the About tag to display as purple when it is active. I already have the javascript made for it. The hover state works but I can't get the 'active:' state to work. Here is what I have in my config file for tailwindcss.

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      textColor: ["active"],
    },
  },
  plugins: [],
}