Hover, focus, dark and friends. Print it, pin it, internalize it.
The sheet#
| Class / pattern | Notes |
|---|---|
hover:bg-blue-600 | state |
focus-visible:ring-2 | core pattern |
active:scale-95 | core pattern |
dark:bg-slate-900 | scheme variant |
group-hover:opacity-100 / peer-checked:bg-blue-600 | state |
How to practice#
- Rebuild one recipe from memory using only this sheet
- Add a screen prefix to every pattern
- Swap one palette across the whole sheet
- Then delete the sheet — the search bar is faster