自定义前缀tw-下Tailwind CSS group-hover功能失效求助

问题核心 #

给Tailwind设置tw-自定义前缀后，group-hover变体无法正常触发样式，本质是对自定义前缀的作用范围理解有误。

正确写法 #

自定义前缀仅需添加到具体的工具类上，group-hover这类状态变体本身不需要加前缀；同时父元素的group类需要加上前缀变为tw-group。

完整代码示例：

<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<script>
    tailwind.config = { prefix: 'tw-' }
</script>

<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
  <div class="tw-group tw-text-xl">
    <strong class="group-hover:tw-text-red-500">Hover on me </strong>
    <strong class="group-hover:tw-text-green-500">the texts will be </strong>
    <strong class="group-hover:tw-text-blue-500">of different colors</strong>
  </div>
</div>

错误写法分析 #

1. 第一种写法错误：给group-hover变体也添加了前缀（tw-group-hover:tw-text-xxx），Tailwind无法识别带前缀的状态变体，导致样式不生成。
2. 第二种写法错误：仅给变体加了前缀，但后面的工具类未加前缀（tw-group-hover:text-xxx），工具类未被Tailwind正确解析，自然不会生效。

原理说明 #

Tailwind的自定义前缀规则是：前缀会附加到实用工具类的名称上，而像group-hover、hover这类状态选择器属于变体前缀，不属于工具类范畴，因此不需要添加自定义前缀。父元素的group是标识类，需要加上前缀让Tailwind识别为分组容器。

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