Tailwind CSS 组悬停不适用于自定义前缀

Question

我正在使用 Tailwind CSS 并为所有类添加自定义前缀

tw-

。但是，我无法使组悬停功能正常工作。这是我正在使用的代码：

<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="tw-group-hover:tw-text-red-500">Hover on me </strong>
    <strong class="tw-group-hover:tw-text-green-500">the texts will be </strong>
    <strong class="tw-group-hover:tw-text-blue-500">of different colors</strong>
  </div>
</div>

我也尝试过

<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="tw-group-hover:text-red-500">Hover on me </strong>
    <strong class="tw-group-hover:text-green-500">the texts will be </strong>
    <strong class="tw-group-hover:ext-blue-500">of different colors</strong>
  </div>
</div>

以下内容无需前缀即可工作

<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<div class="flex h-screen justify-center items-center">
  <div class="group text-xl">
    <strong class="group-hover:text-red-500">Hover on me </strong>
    <strong class="group-hover:text-green-500">the texts will be </strong>
    <strong class="group-hover:text-blue-500">of different colors</strong>
  </div>
</div>

Answer 1

根据文档：

重要的是要了解此前缀是在任何变体修饰符之后添加的。这意味着具有响应式或状态修饰符（如 sm: 或

hover:

）的类仍将具有响应式或状态修饰符

first

，您的自定义前缀出现在冒号之后：

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

所以对于你的情况来说，一般是

group-hover:tw-<class name>

:

tailwind.config = { prefix: 'tw-' }

<script src="https://cdn.tailwindcss.com/3.2.4"></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>