Spacing
A single base unit. Every padding, margin and gap utility is a multiple of it, which is what keeps rhythm consistent without anyone measuring. Prefer gap-* on a flex or grid container over margins on its children.
Base unit --spacing: 4px. A utility's
number is its multiple, so p-4 is
16px and gap-2 is
8px.
Radius
Three steps off the one --radius: 0.75rem variable — move it and all three move with it.
Depth
Only a layer that renders over other content casts a shadow — a popover or a dialog. A card,
a table or a toolbar never floats, so a shadow there is a lie about depth. Reaching for shadow-sm is the tell: it is not a token, so it falls back
to Tailwind's stock hard-coded black and looks wrong in light mode.
shadow-md 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 6px 16px -4px rgb(0 0 0 / 0.1)
shadow-lg 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 16px 40px -8px rgb(0 0 0 / 0.14)