Cursor and Clicking

Point at a link on any website: the mouse pointer turns into a hand, which says "you can click here". Over our button, though, the pointer stays an arrow. That's what browsers show over buttons, and Tailwind keeps it. Still, most websites show the hand over buttons too, because people know it from links. That's what the class cursor-pointer does: it makes the CSS cursor: pointer.

A few other values of cursor that may come in handy:

• cursor-default: the usual arrow,
• cursor-text: the text cursor, as over a text field,
• cursor-not-allowed: a crossed-out circle, for things that can't be clicked. You'll use it later in this lesson.

A button can also show that it's being pressed. The variant active: applies a class while you're pressing the element: from the moment you press the mouse button over it until you release it (in CSS, the pseudo-class :active). An even darker background works well: active:bg-orange-700 Adopt Tiger.

While you're pressing the button, the mouse pointer is over it, so hover:bg-orange-600 and active:bg-orange-700 both apply at the same time. Which one wins? In your own CSS, it would be the rule written later. In Tailwind, you don't have to think about it: Tailwind writes the rules for its variants in a fixed order, with active: after hover:, so the pressed look wins. The order of the classes in the class attribute doesn't matter, just as before.