Состояния: hover, focus, active, disabled

Делаем элементы интерактивными: меняем вид при наведении, фокусе, нажатии и блокировке.

Вариант — это префикс перед классом, который включает стиль только в определённом состоянии: hover:bg-blue-700 действует лишь при наведении.

hover — наведение мыши

Самый частый вариант. Добавьте к классу префикс hover:, и стиль применится только когда курсор над элементом:

<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Купить
</button>

В покое кнопка синяя (blue-600), при наведении темнеет до blue-700 — пользователь видит, что элемент кликабельный.

focus — фокус

focus: срабатывает, когда элемент в фокусе (например, в поле ввода кликнули или перешли табом). Обычно подсвечивают кольцом:

<input class="border rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">

При фокусе вокруг поля появится синее кольцо, а стандартная браузерная обводка убирается (focus:outline-none). Это важно для доступности — пользователь должен видеть, где он находится.

active — момент нажатия

active: действует, пока кнопку зажали. Лёгкое «вдавливание» делает интерфейс отзывчивым:

<button class="bg-blue-600 active:bg-blue-800 text-white px-4 py-2 rounded">
  Нажми
</button>

В момент клика кнопка кратко темнеет до blue-800.

disabled — заблокировано

disabled: применяется к отключённым элементам (с атрибутом disabled). Обычно их приглушают и убирают курсор-руку:

<button disabled class="bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-2 rounded">
  Отправить
</button>

Отключённая кнопка станет серой, а курсор покажет «запрещено» — сигнал, что нажать нельзя.

Варианты можно комбинировать

Префиксы складываются: md:hover:underline — подчёркивание при наведении, но только на экранах от md. Порядок «брейкпоинт : состояние : класс».

Итог

hover: — при наведении, focus: — при фокусе (важно для доступности).
active: — в момент нажатия, disabled: — для отключённых элементов.
Варианты комбинируются с брейкпоинтами: md:hover:....