Tailwind CSS Group is not working in custom classes - tailwind-css

Question

I am trying to build a dropdown with tailwind CSS(v2.2.15) group and group-hover classes. It works fine when I use them in HTML directly. But when I use it in custom class with #apply it doesn't work.
Custom classes:
.dropdown-container {
#apply group inline-block relative;
}
.dropdown-list {
#apply absolute
hidden
-left-16
top-0
rounded-lg
text-sm
group-hover:block;
}
but if I use the group in HTML directly it works fine. I also extend the group hover for display in tailwind.config.js
tailwind.config.js
variants: {
extend: {
display: ['group-hover']
}
},
Is it possible to use this feature in custom class

Answer 1

This doesn't answer your exact question, but tailwind provide a huge bunch of pre-built components you can just cut and paste to save reinventing the wheel: https://tailwindcomponents.com/components/dropdowns

Answer 2

I had issues using group-hover inside #apply, so i just used vanilla css
.parent-class:hover .child-class {
#apply your-tailwind-classes
}
If you want to use custom classes when using group-hover inside the template:
in css file
#tailwind utilities;
#layer utilities {
.hover-small { #apply your--tailwind-classes; // or normal css }
.hover-large { #apply your--tailwind-classes; // or normal css }
}
in html just use group-hover with these custom utilities
<span class="handle transition duration-300
rounded-full group-hover:custom-hover-small">
</span>
In my case i needed dynamic class depending on the size prop
<span class="handle transition duration-300 rounded-full"
:class="`group-hover:hover-${size}`">
</span>
but for that to work i had to add these specific classes in tailwind.config.js safelist so its pre-generates it
safelist: ['group-hover:hover-small', 'group-hover:hover-large'],