TailwindCSS：matchVariants生成的变体不支持带后缀的嵌套group类

你的自定义group-status变体仅支持无后缀的group类，核心原因是代码硬编码了.group选择器，没有兼容Tailwind的group命名空间后缀（即group/自定义名称这类写法）。

Tailwind官方的group变体（比如group-hover）能自动识别带后缀的group/xxx，是因为内部实现了对命名空间后缀的动态拼接逻辑，而你的代码未处理这部分逻辑。

调整matchVariant的回调逻辑，接收Tailwind自动传递的modifier参数（对应group的后缀部分），动态拼接成支持命名空间的选择器：

matchVariant("group-status", ({ modifier, value }) => {
  // 拼接group的命名空间后缀，比如 group/card
  const groupSelector = modifier ? `.group/${modifier}` : ".group";
  return `:merge(${groupSelector}[data-status=${value}]) &`;
}, {
  values: {
    active: "active",
    inactive: "inactive"
  },
  // 允许使用任意命名空间后缀
  modifiers: ["*"]
});

• 父元素为group[data-status="active"]时，使用group-status:active:bg-blue-500
• 父元素为group/card[data-status="inactive"]时，使用group-status/card:inactive:opacity-50

修改后，自定义变体的用法将和Tailwind核心的group变体完全一致。

内容的提问来源于stack exchange，提问作者alas.code