Breakpoint

A breakpoint is a viewport width at which your layout rule changes: three columns collapse to one, the nav folds into a hamburger, the sidebar drops below the article. In CSS it's a media query threshold; in a design file it's the second and third artboard you draw. Most teams inherit a set rather than invent one, and Tailwind's 640 / 768 / 1024 / 1280 / 1536 is the current default vocabulary.

Reach for one when the layout genuinely stops working, not on a schedule. Squeeze the browser window until something looks bad, and that width is your breakpoint. Three or four well-chosen ones cover almost every device; a dozen device-named ones ('iPhone 14 Pro') age badly the moment a new phone ships.

Gotcha: breakpoints react to the window, not to the box the component sits in. A card that looks fine in a wide main column breaks when you drop it into a narrow sidebar, because the window never got smaller. That's what container queries are for. Also pick a direction and stick to it: mobile-first uses min-width and layers complexity on, and mixing min-width with max-width in one project produces overlap bugs nobody can trace.