tailwindcss group-hover not working on transforms

user_10553329 0
Viewed 4280

Is it possible to use transforms with the group-hover pseudo selector? I can get group-hover to work for things that aren't transforms like text color, but I can't get it to work while doing things like translate-x or scale. Below is an example. Neither of the group-hover transforms on the inner div work for me but the group hover for background and text work.

<div class="group">
  <div id="inner" class="transform group-hover:translate-x-1/2 group-hover:scale-110 group-hover:bg-blue-200">
       <p class="group-hover:text-white">some text</p>
       </div>
</div>

Am I doing something wrong? here's a codepen of it in action

tailwind-css
2 Answers

See, as per the documentation group-hover is enabled for a few core plugins which does not include transform.

So to support transform too, you will have to enable group-hover variant for it in the tailwind.config.js, as explained in the documentation.

user_74089410

The documentation is not that detailed.

To make group-hover work with transform -> translate you have to enable it in fact for the translate attribute - not transform. At least this is what worked for me in tailwind v2.2.16.

You can do it like this (so it will work both for group-hover and hover):

  config: {
    variants: {
      extend: {
        translate: ['group-hover', 'hover'],
      },
    },
  }

in your tailwind.config.js file.

user_17165740
Related