Фокус

Щёлкните по полю «Имя»: в нём начнёт мигать курсор, и то, что вы печатаете, попадёт туда. У поля есть фокус: это тот элемент страницы, который получает то, что вы вводите с клавиатуры. Одновременно фокус может быть только у одного элемента.

Не все пользуются мышью. Некоторые люди перемещаются по странице с помощью клавиатуры: Tab переводит фокус на следующую ссылку, кнопку или поле, Shift+Tab возвращает его назад, а Enter нажимает кнопку, у которой есть фокус. Попробуйте: щёлкните по пустому месту в верхней части окна предпросмотра и несколько раз нажмите Tab. Браузер рисует контур вокруг элемента с фокусом. Без контура люди, которые пользуются клавиатурой, не поняли бы, где они находятся на странице. Поэтому никогда не убирайте его, если не заменяете своим.

Собственный контур браузера не всегда подходит странице: на наших оранжевых кнопках его плохо видно. В Tailwind есть два варианта для фокуса:

• focus: применяет класс всякий раз, когда у элемента есть фокус (в CSS это :focus). Это подходит для полей форм: они должны показывать, что у них есть фокус, и когда вы щёлкнули по ним, и когда перешли к ним с помощью Tab.
• focus-visible: применяет класс только тогда, когда браузер решает, что фокус должен быть виден (в CSS это :focus-visible): когда вы добрались до кнопки с клавиатуры, но не когда щёлкнули по ней мышью. Для кнопок это то, что нужно. Тот, кто щёлкнул, и так знает, какая это кнопка, а контур после каждого щелчка только мешал бы.

Сам контур создаётся классами outline-*. В отличие от рамки, контур не занимает места, поэтому при его появлении ничего на странице не сдвигается:

Поле с фокусом получает оранжевый контур вместо браузерного: focus:outline-2 focus:outline-orange-500. Кнопка получает такой же контур с небольшим зазором, но только если фокус пришёл с клавиатуры: focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500. Как видите, каждому классу, который должен действовать только в каком-то состоянии, нужен свой вариант.

Вам могут встретиться и классы ring-*, например focus:ring-2. Они рисуют похожую линию вокруг элемента с помощью тени (box-shadow) и выполняют ту же задачу; в этом курсе мы пользуемся контурами. И остерегайтесь типичной ошибки: класс outline-hidden прячет контур. Если использовать его сам по себе, без собственного стиля для фокуса, люди, которые пользуются клавиатурой, потеряются на странице.