Summary

In this lesson, we made the shelter's page react to its visitors and found out that:

• A variant is a prefix in front of a class, followed by a colon. A class with a variant applies only in its state: hover:bg-orange-600 only while the mouse pointer is over the element. The element keeps its usual classes too.
• Every class that should apply only in a state needs its own variant, such as focus-visible:outline-2 focus-visible:outline-orange-500.
• Variants can be chained: enabled:hover:bg-orange-600 applies only when both conditions hold.
• transition-colors, transition-shadow or transition, together with duration-*, make changes smooth. They go on the element without a variant, so that the change is smooth both ways.
• cursor-pointer shows the hand over a button, cursor-not-allowed a crossed-out circle.
• Preflight removes the border and the background of form fields, so you style them yourself. The placeholder attribute shows an example in an empty field, and the variant placeholder: sets its color.
• An element with focus needs a visible outline for people using the keyboard, so never remove it without a replacement: focus: for fields, focus-visible: for buttons, with outline-2, outline-offset-2 and an outline-* color.
• The disabled attribute switches a button off, and the variant disabled: gives it a look that shows it.
• group on an ancestor and group-hover: on an element inside it style the element when the pointer is over the ancestor.
• first:, last:, odd: and even: style an element by its position among its siblings. They go on every one of the siblings.

In the next lesson, Responsive Design, you'll meet variants that don't depend on what the visitor does, but on how wide the screen is.

Practice: here's a new piece of the shelter's website, a box asking for donations. Its "Donate" button is styled, but it doesn't react to anything yet. Use what you've learned in this lesson.