Варианты group и peer

Обычный hover: реагирует на наведение на сам элемент. Часто нужно другое: навели на всю карточку — изменилась кнопка внутри неё; отметили флажок — изменилась подпись рядом. Для этого есть варианты group-* (по состоянию родителя) и peer-* (по состоянию соседа).

group: состояние родителя

Родителю ставят класс group, а детям — варианты group-hover:, group-focus: и другие:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<a href="#" class="group block max-w-xs rounded-xl border border-gray-200 p-4 hover:border-indigo-400">
  <h2 class="font-semibold group-hover:text-indigo-600">Беспроводные наушники</h2>
  <p class="text-sm text-gray-500">Подробнее о товаре</p>
</a>

Наведите курсор на любое место карточки — название станет синим, хотя курсор может быть над описанием.

Карточка товара с group

Картинка слегка увеличивается, а кнопка появляется, когда курсор над карточкой:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="group max-w-xs overflow-hidden rounded-xl bg-white shadow-lg">
  <div class="relative overflow-hidden">
    <img src="/media/photo-400x250.jpg" alt="Наушники" class="h-44 w-full object-cover transition group-hover:scale-105">
    <button class="absolute right-3 bottom-3 rounded-lg bg-white px-3 py-1 text-sm font-medium opacity-0 shadow group-hover:opacity-100">
      В корзину
    </button>
  </div>
  <p class="p-4 font-semibold">Наушники — $79</p>
</div>

transition делает увеличение плавным — о переходах следующий урок.

Именованные группы

Если группы вложены, group-hover: реагирует на любую из них. Группе можно дать имя: group/item, а у ребёнка написать group-hover/item:visible. Тогда стиль зависит только от нужного предка.

peer: состояние соседа

peer ставят элементу, а вариант peer-* — его соседу, который идёт после него. Самый частый случай — подсказка об ошибке рядом с полем:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label class="block max-w-xs">
  <span class="text-sm font-medium">Email</span>
  <input type="email" class="peer mt-1 w-full rounded-lg border border-gray-300 px-3 py-2" placeholder="anna@example.com">
  <span class="mt-1 hidden text-sm text-red-600 peer-invalid:block">Введите корректный адрес</span>
</label>

Наберите в поле текст без знака @ — под ним появится красная подсказка. peer-invalid:block показывает её, когда сосед-поле не проходит проверку браузера.

Так же работают peer-checked: для флажков и переключателей и peer-focus: для подписей у полей.

Частая ошибка

Поставить элемент с peer-* перед элементом peer:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label>
  <span class="text-gray-500 peer-checked:text-green-600">Подписаться на новости</span>
  <input type="checkbox" class="peer">
</label>

Отметьте флажок — подпись не позеленеет. peer-* построен на селекторе соседей ~, а он видит только следующие элементы. Ставьте элемент с классом peer раньше в разметке.

Спасибо, что читаете!