`group` в Tailwind CSS — что это такое и как работает?

В Tailwind CSS класс group используется для управления состояниями дочерних элементов на основе состояния родительского элемента. Это удобно, например, для стилизации элементов при наведении на родительский контейнер.

1. Как работает group?

Обычно в CSS, если нужно изменить стиль дочернего элемента при наведении на родителя, приходится писать так:

.parent:hover .child {
  color: red;
}

В Tailwind CSS это делается с group:

<div class="group hover:bg-gray-200 p-4">
  <p class="text-gray-500 group-hover:text-red-500">Текст изменится при наведении</p>
</div>

Что здесь происходит?

• group добавляется родителю, чтобы он стал "группой".
• group-hover:text-red-500 указывает, что текст внутри изменит цвет при наведении на родителя.

2. Примеры использования group

Изменение цвета иконки при наведении

<button class="group flex items-center space-x-2 p-2 border rounded">
  <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path d="M10 3a1 1 0 00-1 1v6H3a1 1 0 000 2h6v6a1 1 0 002 0v-6h6a1 1 0 000-2h-6V4a1 1 0 00-1-1z" />
  </svg>
  <span class="text-gray-700 group-hover:text-blue-500">Добавить</span>
</button>

При наведении на кнопку цвет иконки и текста изменится на синий.

Анимация раскрытия блока при наведении

<div class="group w-40 bg-gray-100 p-4 rounded cursor-pointer hover:bg-gray-200">
  <p>Наведи на меня</p>
  <div class="hidden group-hover:block mt-2 p-2 bg-white shadow">
    Скрытый текст
  </div>
</div>

При наведении group-hover:block покажет скрытый блок.

** Стилизация активного элемента списка**

<ul>
  <li class="group flex items-center space-x-2 p-2 rounded cursor-pointer hover:bg-gray-100">
    <span class="w-3 h-3 rounded-full bg-gray-300 group-hover:bg-green-500"></span>
    <span class="text-gray-700 group-hover:text-black">Элемент списка</span>
  </li>
</ul>

Иконка и текст изменят цвет при наведении.

3. Комбинация group с group-focus, group-active

| Класс | Описание | |-|-| | group-hover | Дочерний элемент реагирует на hover родителя | | group-focus | Дочерний элемент реагирует на focus родителя | | group-active | Дочерний элемент реагирует на active родителя |

Пример с group-focus (изменение при фокусе)

<div class="group focus-within:ring-2 focus-within:ring-blue-500 border p-4">
  <input type="text" class="border p-2 outline-none" placeholder="Фокус сюда">
  <p class="text-gray-500 group-focus-within:text-blue-500">Текст изменится при фокусе</p>
</div>

Когда инпут получает фокус, текст станет синим.

Вывод

• group нужен, чтобы стилизовать дочерние элементы в зависимости от состояния родителя.
• Можно использовать group-hover, group-focus, group-active.
• Это упрощает код, потому что не нужно писать кастомные CSS-правила. Используй group, чтобы создавать более динамичные интерфейсы без дополнительного JS!