Kurzor a kliknutí

Najeďte myší na odkaz na kterémkoli webu: ukazatel myši se změní v ručičku, která říká „sem můžete kliknout“. Nad naším tlačítkem ale zůstává šipka: prohlížeče ji nad tlačítky ukazují samy od sebe a Tailwind to nemění. Většina webů přesto ukazuje ručičku i nad tlačítky, protože ji lidé znají z odkazů. Přesně to dělá třída cursor-pointer: vytvoří CSS cursor: pointer.

Několik dalších hodnot vlastnosti cursor, které se vám mohou hodit:

• cursor-default: obvyklá šipka,
• cursor-text: textový kurzor, jako nad textovým polem,
• cursor-not-allowed: přeškrtnuté kolečko pro věci, na které nejde kliknout. Použijete ho později v této lekci.

Tlačítko může také ukázat, že je právě stisknuté. Varianta active: použije třídu, dokud prvek držíte stisknutý: od chvíle, kdy nad ním stisknete tlačítko myši, dokud ho nepustíte (v CSS je to pseudotřída :active). Dobře poslouží ještě tmavší pozadí: active:bg-orange-700 Adoptovat Mourka.

Když tlačítko držíte stisknuté, je nad ním ukazatel myši, takže platí hover:bg-orange-600 i active:bg-orange-700 zároveň. Která z nich vyhraje? Ve vašem vlastním CSS by to bylo pravidlo napsané později. V Tailwindu nad tím přemýšlet nemusíte: Tailwind píše pravidla pro své varianty v pevném pořadí, active: až za hover:, takže vyhraje vzhled stisknutého tlačítka. Na pořadí tříd v atributu class nezáleží, stejně jako dosud.