如何在Tailwind中无需自定义CSS，实现子按钮hover触发父元素透明度变化？

可以完全不用额外的自定义CSS类，用Tailwind原生语法就能实现需求，下面提供两种可行方案：

方案1：直接使用任意变体（无需修改配置） #

Tailwind支持任意变体语法，可以直接在className中结合:has()伪类实现父元素响应子元素hover的效果，同时用Tailwind的过渡工具类替代自定义transition：

<li key={index} className="group transition-opacity duration-300 [&:has(.custom--delete:hover)]:opacity-40">
  <p className="font-medium mb-2">Person No.{index + 1}</p>
  <Button
    variant="danger"
    size="sm"
    {...getRemoveProps(index)}
    type="submit"
    className="custom--delete mt-2"
  >
    <UilTrashAlt className="text-red-300" />
  </Button>
</li>

这里[&:has(.custom--delete:hover)]:opacity-40的意思是：当当前<li>元素包含的.custom--delete按钮处于hover状态时，给<li>应用40%透明度的样式，配合transition-opacity duration-300实现平滑过渡效果。

如果想彻底去掉.custom--delete自定义类，可以给按钮加个自定义属性，比如data-action="delete"，再修改变体规则：

<li key={index} className="group transition-opacity duration-300 [&:has([data-action='delete']:hover)]:opacity-40">
  <p className="font-medium mb-2">Person No.{index + 1}</p>
  <Button
    variant="danger"
    size="sm"
    {...getRemoveProps(index)}
    type="submit"
    className="mt-2"
    data-action="delete"
  >
    <UilTrashAlt className="text-red-300" />
  </Button>
</li>

方案2：添加自定义变体（写法更简洁） #

如果觉得任意变体的语法太长，可以在tailwind.config.js中添加自定义变体，让写法更直观：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addVariant }) => {
      // 自定义一个针对删除按钮hover的变体
      addVariant('has-delete-hover', '&:has(.custom--delete:hover)');
    }
  ],
}

之后就可以在<li>的className里直接使用这个自定义变体：

<li key={index} className="group transition-opacity duration-300 has-delete-hover:opacity-40">
  {/* 其余代码不变 */}
</li>

注意事项 #

:has()伪类需要现代浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），如果需要兼容旧版浏览器，可能还是需要保留原来的自定义CSS方案。

内容的提问来源于stack exchange，提问作者MiRAY