I am using the following component:
https://tailwindcomponents.com/component/dropdown-shopping-cart
and I want the menu to be opened for 3 seconds after hovering.
What I understand is that the thing that is responsible for the dropdown to be shown after hover is the
<div > and the
group-hover:block. To get the effect I want I thought about maybe adding a transition with certain duration but I can't get this to work.
CodePudding user response：
You can add delay-300 in your hovering div class so it will run the animation after 0.3seconds in you case you need delay-3000 but as default tailwind doesn't have it, you need to change tailwind.config.js
on this
module.exports = {
theme: {
extend: {
transitionDelay: {
'3000': '3000ms',
}
}
}
}
worknig example Tailwind playground
CodePudding user response：
Have the same question. The answer given above is being applied to a div. Its not actually doing the group and group-hover classes which is the question.
delay-500 for example does not see to work in that case
Example. The delay-500 is not working. What needs added to make the dropdown wait a half second?