Hover and group-hover don't work in Tailwind CSS

Question

I want to use hover and group-hover in Tailwind CSS, but they are not working on some pages of my Next.js application. Even when I inspect the DOM, there are no hover classes. I changed my Tailwind config according to the docs, but nothing changed. Here is my code:

 <div className="bg-green-200 w-full h-full flex justify-evenly items-center cursor-pointer transition duration-200 hover:opacity-75">
   <VscGift className="w-14 h-14 text-center text-green-400" />
   <div className="text-green-600 text-xl">for birthday</div>
   <MdOutlineKeyboardArrowLeft className="text-2xl text-green-600 md:ml-28" />
</div>

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        parasto: "parasto",
        samim: "samim",
        vazir: "vazir",
        tanha: "tanha",
        shabnam: "sahel",
        twomedium: "twomedium",
      },
    },
  },
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "active"],
  },

  plugins: [],
};

Answer 1

If you are including a variants section in your config, that probably means you are using Tailwind 2.0. The latest version, 3.0, does not require a list of variants for the common modifiers (hover, group-hover, focus, active, etc.), so you might consider upgrading.

If you are stuck on version 2.0, you will need to add a variant for the style you are trying to modify. In this case the hover variant for opacity:

  variants: {
    opacity: ["hover"],
    backgroundColor: ["responsive", "hover", "focus", "active"],
  },

Answer 2

I find out the answer there is unused relative class in parents of my element,when I deleted that everything works fine