使用 Angular 的顺风组类问题

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:

课程应该是

group-hover:tw-text-blue-500

和

group-hover:tw-bg-blue-500

:

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

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="tw-group tw-p-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg">
  <h2 class="tw-text-xl tw-font-bold tw-mb-4 group-hover:tw-text-blue-500">Parent Component</h2>
  <button class="group-hover:tw-bg-blue-500 tw-p-2 tw-bg-blue-300 tw-rounded">Hover me</button>
</div>