Tailwindcss - 如何在组悬停实用程序中添加顶部/底部/右侧/左侧

Question

div 中有一个<img> 标记和<button> 标记。在 div 中使用group className 和img 标签中的group-hover:opacity-0，它可以正常工作，但<button> 标签中的group-hover:top-1/2 不起作用。

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

我将给定的代码添加到tailwind.config.js。

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

我该如何解决？？？？

Answer 1

将配置中的top 更改为inset，正如docs 所说的那样

您可以通过修改 tailwind.config.js 文件的 variables 部分中的 inset 属性来控制为 top、right、bottom、left 和 inset 实用程序生成哪些变体。

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

注意：如果您使用带有 mode: 'jit' 的 Tailwind v2.1+，它应该可以即时生成，无需额外的变体