My code is working when fine when i am running for group hover on play.tailwindcss.com

But when i copy same code in my local file, group hover is not working there;

what should i include in my tailwind.config.css file to enable group hover in my case?

DEMO

CODE:

 <div class="group">
<a href="#" class=" font-bold text-gray-700 ">Menu</a>
 <div class="hidden group-hover:block absolute bg-white shadow-md w-auto p-4">
  
  <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
  <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
   <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
   <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
 </div> 

CodePudding user response：

The Playground uses JIT mode, so option 1 for you is enabling JIT mode.

Option 2 is to add the group-hover variant to your display utility as shown here https://tailwindcss.com/docs/display#variants

If you're using display variants anywhere else you'll need to add those as well, it might look something like this.

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       display: ['hover', 'focus', 'group-hover'],
      }
    }
  }