Tailwind CSS中如何根据父元素类名控制子元素的显示状态

场景1：匹配li元素的原生:active伪类（鼠标按下未松开状态） #

1. 修改变体配置，给display的扩展配置新增group-active即可：

variants: {
  extend: {
    fontFamily: ['hover', 'focus'],
    borderWidth: ['hover', 'focus'],
    display: ['group-hover', 'group-active']
  },
},

2. 调整元素类名，li保留group类，子span新增group-active:block类：

<li class="group">
  菜单文本
  <span class="hidden group-hover:block group-active:block">要显示的内容</span>
</li>

场景2：匹配你手动给li添加的自定义.active类（比如菜单选中状态） #

需要先自定义group变体来识别自定义的.active类：

1. 完整配置如下：

const plugin = require('tailwindcss/plugin')

module.exports = {
  variants: {
    extend: {
      fontFamily: ['hover', 'focus'],
      borderWidth: ['hover', 'focus'],
      // 新增自定义变体group-custom-active
      display: ['group-hover', 'group-custom-active']
    },
  },
  plugins: [
    plugin(function({ addVariant }) {
      // 注册自定义变体：父元素有group类且带.active类时触发子元素样式
      addVariant('group-custom-active', ':merge(.group).active &')
      // Tailwind 3.2以下版本去掉:merge，写成：
      // addVariant('group-custom-active', '.group.active &')
    })
  ]
}

2. 调整元素类名：

<li class="group active">
  选中的菜单文本
  <span class="hidden group-hover:block group-custom-active:block">要显示的内容</span>
</li>

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