Screens and stacking. Print it, pin it, internalize it.
The sheet#
| Class / pattern | Notes |
|---|---|
xs:480px | core pattern |
sm:640px | core pattern |
md:768px | core pattern |
lg:1024px | core pattern |
xl:1280px | core pattern |
2xl:1536px | core pattern |
md:hover:bg-blue-600 stacking | state |
max-* below-breakpoint (3.1) | core pattern |
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