Наведение, фокус и другие состояния

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

Наведение

Кнопка «В корзину» светлеет при наведении:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-500">
  В корзину
</button>

Наведите курсор на кнопку — фон станет светлее. В Tailwind 4 hover: срабатывает только на устройствах с мышью: на телефоне после касания кнопка не «залипает» в состоянии наведения.

Фокус

Когда пользователь переходит по странице клавишей Tab, элемент в фокусе должен быть заметен. focus: срабатывает при любом фокусе, focus-visible: — только при фокусе с клавиатуры:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<input class="rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none" placeholder="Email">
<button class="ml-2 rounded-lg bg-indigo-600 px-4 py-2 text-white focus-visible:ring-4 focus-visible:ring-indigo-300 focus-visible:outline-none">
  Подписаться
</button>

Щёлкните в поле — рамка станет синей и появится мягкое кольцо. Нажмите Tab, чтобы перейти к кнопке: вокруг неё появится кольцо, а при щелчке мышью — нет.

Основные варианты

Строки списка

odd: и last: избавляют от отдельных классов для чередования и последней строки:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<ul class="w-64">
  <li class="border-b border-gray-200 p-2 odd:bg-gray-50 last:border-0">Наушники</li>
  <li class="border-b border-gray-200 p-2 odd:bg-gray-50 last:border-0">Колонка</li>
  <li class="border-b border-gray-200 p-2 odd:bg-gray-50 last:border-0">Зарядка</li>
</ul>

Нечётные строки серые, а у последней нет нижней линии.

Сочетание вариантов

Варианты складываются слева направо: md:hover:bg-indigo-500 работает только на широком экране при наведении, disabled:opacity-50 приглушает отключённую кнопку:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button disabled class="rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50">
  Нет в наличии
</button>

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

Убрать контур фокуса классом outline-none и ничего не дать взамен:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white focus:outline-none">Купить</button>

Теперь при переходе клавишей Tab не видно, где фокус, и пользователям клавиатуры сложно пользоваться сайтом. Если убираете стандартный контур, всегда добавляйте свой: focus-visible:ring-2.