Как применять hover, focus и другие state-варианты в Tailwind?

Основные псевдоклассы

<button
  class="
    bg-blue-500
    hover:bg-blue-600
    focus:ring-2 focus:ring-blue-300 focus:outline-none
    active:bg-blue-700
    disabled:opacity-50 disabled:cursor-not-allowed
    transition-colors
  "
>
  Кнопка
</button>

<input
  class="
    border border-gray-300
    focus:border-blue-500 focus:ring-1 focus:ring-blue-500
    placeholder:text-gray-400
    read-only:bg-gray-50
  "
  placeholder="Введите значение"
/>

State-варианты в Tailwind CSS

State-варианты (псевдоклассы и псевдоэлементы) добавляются как префикс перед любой утилитой через двоеточие. Это заменяет написание отдельных CSS-правил с псевдоклассами.

Варианты форм и состояний

<!-- Состояния чекбокса -->
<input
  type="checkbox"
  class="
    checked:bg-blue-500 checked:border-blue-500
    indeterminate:bg-gray-300
  "
/>

<!-- Валидация формы -->
<input
  class="
    valid:border-green-500
    invalid:border-red-500
    required:border-yellow-300
  "
  required
/>

<!-- Ссылки -->
<a class="visited:text-purple-600 hover:underline">Ссылка</a>

Группировка: group и group-hover

Маркер group на родителе позволяет стилизовать дочерние элементы при hover на родителе.

<div class="group flex items-center gap-3 p-4 rounded hover:bg-gray-100">
  <img class="size-10 rounded-full group-hover:ring-2 group-hover:ring-blue-500" />
  <div>
    <p class="font-medium group-hover:text-blue-600">Имя</p>
    <p class="text-sm text-gray-500 group-hover:text-gray-700">email@example.com</p>
  </div>
  <svg class="ms-auto opacity-0 group-hover:opacity-100 transition-opacity" />
</div>

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

<!-- Несколько вложенных групп -->
<div class="group/card hover:shadow-lg">
  <div class="group/btn">
    <button class="group-hover/btn:bg-blue-500">Кнопка</button>
    <span class="group-hover/card:text-blue-500">Реагирует на карточку</span>
  </div>
</div>

Peer: стилизация по состоянию соседа

<!-- Показываем подсказку когда input в фокусе -->
<div class="relative">
  <input
    class="peer border rounded px-3 py-2"
    placeholder="Email"
  />
  <p class="hidden peer-focus:block text-sm text-blue-500 mt-1">
    Введите ваш email
  </p>
  <p class="hidden peer-invalid:block text-sm text-red-500 mt-1">
    Некорректный формат
  </p>
</div>

Псевдоэлементы

<blockquote class="
  relative
  before:content-['&ldquo;']
  before:text-4xl before:text-gray-300
  before:absolute before:-top-2 before:-left-4
  after:content-['&rdquo;']
">
  Цитата
</blockquote>

<!-- Стилизация выделенного текста -->
<p class="selection:bg-yellow-200 selection:text-black">
  Выделите этот текст
</p>

Варианты для data-атрибутов

<div data-state="open" class="data-[state=open]:block hidden">
  Видно только когда data-state=open
</div>

Подводные камни

• peer работает только между соседними элементами — peer-элемент должен идти в HTML раньше целевого элемента, иначе CSS-селектор ~ не сработает.
• group без именования не позволяет вложить несколько групп — используйте group/name синтаксис (v3.2+) для вложенных групп.
• Псевдоэлемент before: и after: требуют хотя бы пустого content — без before:content-[''] элемент не отображается.
• Варианты focus-within: и focus-visible: часто путают: focus-within срабатывает при фокусе на любом потомке, focus-visible — только при навигации с клавиатуры.
• disabled: не работает на элементах без атрибута disabled — для кастомных компонентов используйте aria-disabled и вариант aria-disabled:opacity-50.
• Состояние visited: ограничено браузером — из соображений приватности можно менять только цвет, а не layout-свойства.
• Именованные группы и peer group/name появились в v3.2 — в более старых версиях недоступны.

• Смешивать «state-варианты» с похожим механизмом без критерия выбора.
• Игнорировать риск: неверно оценить границы применения темы «state-варианты» и получить хрупкое решение.
• Показывать только синтаксис и не объяснять поведение в runtime или сборке.

• Объясняет условные utilities для hover, focus, disabled, aria и data-состояний.
• Показывает на примере, как работает: варианты добавляют селекторный контекст к utility; Tailwind поддерживает псевдоклассы, media features, group, peer, aria/data и пользовательские варианты.
• Называет production-нюанс и граничный случай для темы «state-варианты».