Итоги

В этом уроке мы сделали так, чтобы страница приюта реагировала на посетителей, и узнали, что:

• Вариант — это префикс перед классом, после которого стоит двоеточие. Класс с вариантом действует только в своём состоянии: hover:bg-orange-600 — только пока указатель мыши находится над элементом. Обычные классы элемента при этом остаются.
• Каждому классу, который должен действовать только в каком-то состоянии, нужен свой вариант, например focus-visible:outline-2 focus-visible:outline-orange-500.
• Варианты можно соединять: enabled:hover:bg-orange-600 действует, только когда выполнены оба условия.
• transition-colors, transition-shadow или transition вместе с duration-* делают изменения плавными. Их ставят на элемент без варианта, чтобы изменение было плавным в обе стороны.
• cursor-pointer показывает руку над кнопкой, cursor-not-allowed — перечёркнутый круг.
• Preflight убирает рамку и фон у полей форм, поэтому оформляете их вы сами. Атрибут placeholder показывает пример в пустом поле, а вариант placeholder: задаёт его цвет.
• Элементу с фокусом нужен видимый контур для людей, которые пользуются клавиатурой, поэтому никогда не убирайте его без замены: focus: для полей, focus-visible: для кнопок, с outline-2, outline-offset-2 и цветом outline-*.
• Атрибут disabled отключает кнопку, а вариант disabled: придаёт ей вид, по которому это видно.
• group на предке и group-hover: на элементе внутри него оформляют элемент, когда указатель находится над предком.
• first:, last:, odd: и even: оформляют элемент по его положению среди соседних. Их ставят на каждый из соседних элементов.

В следующем уроке, «Адаптивный дизайн», вы познакомитесь с вариантами, которые зависят не от действий посетителя, а от ширины экрана.

Практика: вот новая часть сайта приюта — блок с просьбой о пожертвованиях. Кнопка «Пожертвовать» оформлена, но пока ни на что не реагирует. Используйте то, что вы узнали в этом уроке.