需求
在 Tailwind CSS 中，有时我们希望在鼠标悬停或激活父元素时，也让子元素发生相应的样式变化。默认情况下，Tailwind 的 hover: 和 active: 类仅对元素自身生效，因此无法直接影响子元素。
什么是 group 类？
Tailwind CSS 的 group 类允许你在父元素上创建一个“组”，使得该组内的所有子元素可以基于父元素的状态（例如 hover、focus 或 active）应用不同的样式。group 类并不直接影响元素的外观，而是提供了一种机制，使得子元素能够响应父元素的状态变化。
PS：你（被）Tailwind css 攻略进度多少了？（妙妙真的可爱死了）[心心脸][心心脸]
基本语法
-
给父元素添加
group类：在父元素上添加 group 类，使其成为一个“组”。 -
使用
group-hover和group-active前缀：在子元素上使用 group-hover 或 group-active 前缀，表示子元素的样式将在父元素的 hover 或 active 状态下发生变化。
group 类的工作原理
1. group-hover
group-hover 允许子元素在父元素悬停时应用样式。具体来说，当父元素被鼠标悬停时，任何带有 group-hover 前缀的子元素将自动获得指定的样式。
2. group-active
group-active 类可以在父元素被激活时应用样式。这通常用于响应点击事件，在按钮或交互元素上非常有用。
代码示例
响应父元素的 hover 和 active 状态修改边框和文本
<template>
<div class="group p-8 bg-gray-100 rounded-lg hover:bg-gray-200">
<!-- 子元素通过 group-hover 前缀响应父元素 hover -->
<h2 class="text-xl group-hover:text-red-500 group-active:text-blue-500">
Hover 或点击我！
</h2>
<p class="group-hover:border-t-2 group-hover:border-red-500 group-active:border-b-2 group-active:border-blue-500">
这是一个示例文本。
</p>
</div>
</template>
-
group-hover:text-red-500当父元素悬停时，h2 元素的文字颜色变为红色。 -
group-active:text-blue-500当父元素被点击时，h2 元素的文字颜色变为蓝色。 -
group-hover:border-t-2和group-hover:border-red-500当父元素悬停时，p 元素的顶部边框变为红色，宽度增加。 -
group-active:border-b-2和group-active:border-blue-500当父元素被点击时，p 元素的底部边框变为蓝色，宽度增加。
group 类的使用场景
1. 按钮组或卡片
通过使用 group 类，您可以轻松创建具有多个交互元素（如按钮、图标、文本等）的父元素，并在父元素的状态（hover、focus、active）变化时触发所有子元素的样式变化。
2. 图标和文本按钮
例如，您可以创建图标和文本组合的按钮，使用 group 类确保无论鼠标悬停还是点击，都能一致地改变按钮图标和文本的颜色、背景或其他样式。
3. 复杂的交互式组件
例如，卡片、弹窗或导航栏中的多个元素，可以通过 group 类确保子元素在用户与父元素交互时有统一的响应，提供更好的用户体验。
小结
Tailwind CSS 中的 group 类使得处理父元素与子元素之间的样式变得更加简单和灵活。通过 group-hover 和 group-active 类，我们可以让子元素响应父元素的状态变化，从而创建更加动态和交互丰富的界面。在实际开发中，这种机制非常适合用于按钮、卡片等元素的样式控制，使得组件的视觉反馈更加一致和连贯。
