24

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>
1
  • Wilth tailwind 3, this works with small changes: add group class to the parent div. Change hover in button to group-hover and everything works. May 14, 2022 at 4:54

4 Answers 4

54

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>
3
  • 1
    If you want child to be flex then you have to <button class="invisible group-hover:visible">Child</button> and in tailwind.config.js visibility: ["group-hover"]
    – Bimal Grg
    Nov 17, 2021 at 10:05
  • 2
    Tailwind 3 adds styling based on parent state with group-{} modifier by default.
    – Oleg
    Feb 2, 2022 at 16:16
  • I have two divs, but when I implement your code it hovers both at the same time ;( Mar 11 at 17:37
24

Here's my solution:

<div class="group">
  <button class="text-white hidden group-hover:block">Hello</button>
</div>

As you can see I'm using the group class, which applies a rule to the children instead of itself.

So when I write group-hover:block I'm saying: "Apply the block class to this element if there's an :hover event dispatched on my immediate parent with the class group".

More information here.

2
  • 4
    Did you have to do anything special with your tailwind files to accomplish this? I am currently just using the tailwind / tailwind ui cdn and this does not work straight out of the box. The group-hover works with some classes such as text color, but not the block class. Hoping I don't have to compile using npm while just testing stuff. Thanks.
    – Coyote6
    Jun 9, 2021 at 16:57
  • 1
    With tailwind 3 the group class is added by default, no need to modify the tailwind.config.js file Dec 16, 2021 at 12:25
16

You cannot hover over a hidden element.

One solution is using opacity

<div>
  <button class="text-white opacity-0 hover:opacity-100">Hello</button>
</div>
1
  • 1
    that's true, i should correct what I needed though. I tried opacity but it wasn't aesthetically pleasing so i went with the another option of setting a private boolean and using v-if on the target element.
    – penguin
    Mar 30, 2020 at 17:08
-7

Based on my research and recommendations I have been told to use opacity, but opacity does not really give a good UI/UX feel to it so I went with another route of creating a private boolean object in vue such as

private hover: boolean = false;

Note I found @mouseover and @mouseleave are still viable in Vue.

then in my .vue file I would consider using boolean variables to trigger the target I would want to hide and display.That is

On the target button or element you'd like to hide and display when hovering

<div class="mt-2 mb-2"
`@mouseover = "hover = true"`
`@mouseleave = "hover = false"`
>Hello World
</div>

Note: I am using Vue in tandem with typescript to achieve such a thing.

1
  • 2
    This problem does not require JS at all, CSS is powerful enough
    – Mattia S.
    May 25, 2021 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.