tailwindcss怎么在hover内改变内部元素的样式？

Question

上面是原状态，下面是鼠标放上去的状态，我想叫下面的鼠标放上去文字变成白成，这个用tailwindcss怎么实现，都是在class里写，怎么实现呀？？

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl cursor-pointer shadow-md flex items-center space-x-4 hover:bg-gray-700">
        <div class="flex-shrink-0">
          <img class="h-12 w-12" src="@/assets/imgs/logo.png">
        </div>
        <div>
          <div class="text-xl font-medium text-black">ChunShu</div>
          <p class="text-gray-500">You have a new message</p>
        </div>
    </div>

Answer 1

Group-hover

如果您需要当鼠标悬停在一个指定的父元素上时对其子元素设置样式，给父元素添加 group 类，并且为子元素的功能类添加 group-hover: 前缀。

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
 <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
 <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>