Displaying button when hovering over div in TailwindCSS

Question

At the moment I am having a bit of trouble using TailwindCSS to display a button when hovering over a div in Vue. Normally, I'd use CSS to do it but I want to do it using tailwind.

I referred to the documentation using visibility but it didn't work as expected. Is visibility normally for screen related elements? or it can be used for buttons and other content as well?

Code

<div>
  <button class="text-white invisible hover:visible">Hello</button>
</div>

Answer 1

Add this to your tailwind.config.js file

variants: {
    extend: {
        display: ["group-hover"],
    },
},

And then add group to your parent div and hidden and group-hover:block to your child element that you want to appear on hover of the parent.

<div class="group">
  <button class="hidden group-hover:block">Child</button>
</div>