Core utilities quick reference
Use this as a memory aid, not as a replacement for understanding the underlying CSS.
| Goal | Common utilities |
|---|---|
| Layout | block, inline-flex, flex, grid, hidden |
| Flex alignment | items-center, justify-between, flex-col, flex-wrap |
| Grid | grid-cols-1, sm:grid-cols-2, gap-4 |
| Spacing | p-4, px-6, mt-3, gap-2, mx-auto |
| Sizing | w-full, max-w-5xl, min-h-screen, size-10 |
| Typography | text-sm, text-2xl, font-semibold, leading-7, tracking-tight |
| Color | bg-white, text-slate-700, border-slate-200 |
| Shape/elevation | rounded-xl, border, shadow-sm, ring-2 |
| Interaction | hover:*, focus-visible:*, disabled:*, active:* |
| Responsive | sm:*, md:*, lg:*, xl:* |
| Theme | dark:* |
| Motion | transition-colors, motion-reduce:* |
The exact utility availability and token values depend on the installed version and project theme.
Remember the mapping
`flex`:
display: flexOne-dimensional layout.
`grid`:
display: gridTrack-based two-dimensional layout.
`items-center`:
align-items: centerCross-axis alignment in flexbox.
`justify-between`:
justify-content: space-betweenMain-axis distribution in flexbox.
`md:*`:
Breakpoint conditionApply at the medium breakpoint and above.
Key Takeaways
- Know the CSS concept behind each utility.
- Check the installed version for exact utilities and tokens.
- Use this table to revise, then practice composing complete layouts.