Lesson 48 +20 XP

Interactivity & SVG Cheatsheet

Interactivity & SVG Cheatsheet

Cursor & selection

Goal	Classes
Clickable	`cursor-pointer`
Disabled	`cursor-not-allowed`
Text	`cursor-text`
Grab	`cursor-grab`
No selection	`select-none`
Select all on click	`select-all`

Pointer & scroll

Goal	Classes
Ignore clicks	`pointer-events-none`
Smooth scroll	`scroll-smooth`
Scroll margin top	`scroll-mt-24`
Snap horizontally	`snap-x snap-mandatory`

Forms

Goal	Classes
Focus ring	`focus:ring-2 focus:ring-sky-500`
Keyboard only	`focus-visible:ring-2`
Placeholder styling	`placeholder:italic placeholder:text-gray-400`
Accent color	`accent-sky-500`
Caret color	`caret-sky-500`
Disabled state	`disabled:opacity-50`
Invalid state	`invalid:border-red-500`

Accessibility

Goal	Classes
Screen-reader only	`sr-only`
Respect reduced motion	`motion-reduce:hidden`
Animate only if safe	`motion-safe:animate-pulse`

SVG

Goal	Classes
Icon size	`size-5`
Fill color	`fill-sky-500`
Inherit color	`fill-current`
Stroke color	`stroke-sky-500`
Stroke width	`stroke-2`

TL;DR

cursor-pointer + focus-visible:ring-2 for buttons.
sr-only for accessible labels.
motion-reduce: respects user preferences.
size-5 fill-current is the standard icon recipe.