如何在group激活时设置after伪类为opacity-100和scale-100？

问题核心 #

你的写法错误在于Tailwind变体的顺序——父元素状态变体（如group-active）必须放在伪类变体（如after:）之前，而不是反过来。

正确写法 #

将classNames.icon里的类调整为：

group-active:opacity-100 group-active:after:opacity-100 group-active:after:scale-100

原因说明 #

Tailwind的类解析逻辑是从左到右依次应用变体：

• group-active:after:opacity-100 表示：当父级.group处于active状态时，给当前元素的after伪类设置opacity: 100
• 而你之前写的after:group-active:opacity-100 会被解析为：给当前元素的after伪类，添加仅当伪类自身处于group-active状态的样式，这显然不符合需求。

补充优化建议 #

为了让状态切换更平滑，建议给after伪类添加基础过渡样式，比如：

after:opacity-0 after:scale-0 after:transition-all group-active:after:opacity-100 group-active:after:scale-100

修改后的完整代码片段 #

<Link
    href={{
        query: createQueryString("tags", tag.id.toString())
    }}
    key={tag.id}
    replace={true}
    className="group relative inline-flex -m-2 p-2"
>
    <div className="absolute inset-0 z-10"></div>
    <Checkbox
        isSelected={tagsQuery?.includes(tag.id.toString())}
        value={tag.id.toString()}
        radius={"sm"}
        className="text-body font-body"
        classNames={{
            icon: "group-active:opacity-100 after:opacity-0 after:scale-0 after:transition-all group-active:after:opacity-100 group-active:after:scale-100"
        }}
        style={{position: "relative", backgroundColor: "transparent"}}
    />
</Link>

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