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

user_14729558 0
Viewed 577

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????

tailwind-css reactjs css
1 Answers

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

user_143050760
Related