11. Состояния и псевдоклассы

Tailwind CSS: Состояния и псевдоклассы

В Tailwind стили для различных состояний (hover, focus, active, disabled) пишутся через префиксы прямо на утилитах. Никаких отдельных CSS-файлов для :hover и :focus.

Базовые состояния

<!-- hover: — при наведении мышки -->
<button class="bg-blue-600 hover:bg-blue-700">Кнопка</button>
<a class="text-blue-600 hover:text-blue-800 hover:underline">Ссылка</a>
<div class="opacity-75 hover:opacity-100 transition-opacity">Блок</div>

<!-- focus: — при фокусе (клавиатура/клик) -->
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none">

<!-- active: — при нажатии -->
<button class="bg-blue-600 active:bg-blue-800 active:scale-95">Нажми</button>

<!-- disabled: — заблокированный элемент -->
<button disabled class="bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50">
  Недоступно
</button>

<!-- checked: — для чекбоксов и радио-кнопок -->
<input type="checkbox" class="accent-blue-600 checked:ring-2 checked:ring-blue-500">

Состояния форм

<!-- placeholder: -->
<input class="placeholder:text-gray-400 placeholder:italic" placeholder="Введите текст...">

<!-- required: -->
<input required class="required:border-red-300">

<!-- invalid: (невалидное значение) -->
<input type="email" class="invalid:border-red-500 invalid:text-red-700">

<!-- valid: -->
<input type="email" class="valid:border-emerald-500">

Group — стили родителя при наведении на дочерний элемент

Мощный паттерн: когда наводишь на карточку, меняются стили внутри неё.

<!-- Добавляем class="group" на родительский элемент -->
<div class="group cursor-pointer">
  <h3 class="text-gray-700 group-hover:text-blue-600 transition-colors">
    Заголовок (синеет при hover на родителе)
  </h3>
  <p class="text-gray-400 group-hover:text-gray-600">
    Текст (темнеет при hover)
  </p>
  <span class="opacity-0 group-hover:opacity-100 transition-opacity">
    Стрелка (появляется при hover)
  </span>
</div>

Именованные группы (для вложенных):

<div class="group/card">
  <div class="group/inner">
    <span class="group-hover/card:text-blue-600 group-hover/inner:text-red-600">
      Текст
    </span>
  </div>
</div>

Peer — стили на основе состояния соседнего элемента

<!-- Показываем ошибку при невалидном инпуте -->
<div>
  <input type="email" class="peer border rounded-lg px-3 py-2" required>
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">
    Введите корректный email
  </p>
</div>

<!-- Анимация лейбла при фокусе на инпут (floating label) -->
<div class="relative">
  <input type="text" id="name" class="peer w-full border rounded-lg px-3 pt-5 pb-2 placeholder-transparent">
  <label for="name"
    class="absolute left-3 top-3 text-gray-500 text-sm transition-all
           peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-500
           peer-placeholder-shown:top-3 peer-placeholder-shown:text-sm">
    Имя
  </label>
</div>

First, Last, Odd, Even

<ul>
  <li class="py-3 first:pt-0 last:pb-0 border-b last:border-b-0">Элемент 1</li>
  <li class="py-3 first:pt-0 last:pb-0 border-b last:border-b-0">Элемент 2</li>
  <li class="py-3 first:pt-0 last:pb-0 border-b last:border-b-0">Элемент 3</li>
</ul>

<!-- Зебра-полосы -->
<tr class="odd:bg-white even:bg-gray-50">...</tr>

Before и After

<!-- before: и after: — псевдоэлементы -->
<div class="before:content-['*'] before:text-red-500 before:mr-1">
  Обязательное поле
</div>

<!-- Декоративная линия через before -->
<h2 class="relative pl-4 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-600 before:rounded">
  Заголовок с акцентом
</h2>

Практика