CODEWITHSUNDEEP
cssreactjstailwind-css
Rakibul hasan
Rakibul hasan

Reputation: 63

Tailwindcss - How to add top/bottom/right/left in group-hover utilities

There are a <img> tag and <button> tag in a div. Use group in the div className and group-hover:opacity-0 in img tag, it's work properly but group-hover:top-1/2 in <button> tag doesn't work.

<div className="group relative bg-white">
<img
  src={restaurant}
  alt="A website image."
  className="group-hover:opacity-0"
/>
<button
  className="absolute -top-96 group-hover:top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
  LEARN MORE
</button>

I add the given code on the tailwind.config.js.

module.exports = {
  // ...
  variants: {
    extend: {
      top: ['group-hover'],
    }
  },
}

how can I solve this????

Upvotes: 4

Views: 1180

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14233

Change top in your config to inset as docs says

You can control which variants are generated for the top, right, bottom, left, and inset utilities by modifying the inset property in the variants section of your tailwind.config.js file.

module.exports = {
  // ...
  variants: {
    extend: {
      inset: ['group-hover'],
    }
  },
}

Note: if you're using Tailwind v2.1+ with mode: 'jit' it should generate on the fly no need in extra variants

Upvotes: 3

Related Questions