Курсор и нажатие

Наведите указатель на ссылку на любом сайте: он превратится в руку, которая говорит «здесь можно щёлкнуть». А над нашей кнопкой указатель остаётся стрелкой. Так браузеры показывают его над кнопками, и Tailwind оставляет это как есть. Но на большинстве сайтов над кнопками тоже показывают руку, ведь люди знают её по ссылкам. Это делает класс cursor-pointer: он задаёт CSS cursor: pointer.

Ещё несколько значений cursor, которые могут пригодиться:

• cursor-default — обычная стрелка,
• cursor-text — текстовый курсор, как над полем для ввода,
• cursor-not-allowed — перечёркнутый круг, для элементов, на которые нельзя нажать. Он понадобится вам позже в этом уроке.

Кнопка может показывать и то, что её сейчас нажимают. Вариант active: применяет класс, пока вы нажимаете на элемент: с того момента, как вы нажали кнопку мыши над ним, и до тех пор, пока не отпустили её (в CSS это псевдокласс :active). Хорошо подходит ещё более тёмный фон: active:bg-orange-700 Забрать Тигра.

Пока вы нажимаете на кнопку, указатель мыши находится над ней, поэтому hover:bg-orange-600 и active:bg-orange-700 действуют одновременно. Какой из них победит? В вашем собственном CSS победило бы правило, записанное позже. В Tailwind об этом можно не думать: он записывает правила своих вариантов в фиксированном порядке, и active: идёт после hover:, так что побеждает вид нажатой кнопки. Порядок классов в атрибуте class не играет роли, как и раньше.