Наведение на карточку

На многих сайтах на указатель мыши реагирует вся карточка, а не только её кнопка. Сделаем так, чтобы имя кошки становилось оранжевым, когда указатель находится в любом месте её карточки: над картинкой, текстом или кнопкой.

Класс hover:text-orange-600 на имени не подойдёт: он сработает, только когда указатель находится над самим именем. Нам нужно оформить имя по состоянию его предка — карточки. В Tailwind для этого есть два класса:

• group на предке помечает его как группу. Сам по себе он ничего не меняет: для него Tailwind не создаёт никакого CSS.
• group-hover: на элементе внутри группы применяет класс, когда указатель находится в любом месте группы.

<div class="rounded-2xl bg-white shadow-md group">
	<img src="/learn/tailwind/cat-orange.svg" alt="Тигр">
	<h3 class="text-xl font-bold group-hover:text-orange-600">Тигр</h3>
</div>

В CSS это селектор потомка (два селектора через пробел), который вы знаете из курса CSS. В упрощённом виде Tailwind создаёт такое правило:

.group:hover .group-hover\:text-orange-600 {
	color: oklch(64.6% 0.222 41.116); /* orange-600 */
}

Другие состояния работают так же, например group-focus: или group-active:.

Сама карточка может реагировать обычным hover:. Тень побольше создаёт ощущение, что карточка приподнимается к вам: hover:shadow-xl. Чтобы тень росла плавно, карточке нужен ещё и переход. transition-colors охватывает только цвета, поэтому используйте transition-shadow, который охватывает тень (или transition, который охватывает и то и другое).