Use mobile-first responsive variants

Unprefixed utilities apply everywhere. A breakpoint variant applies from that minimum width upward.

<img class="w-16 md:w-32 lg:w-48" src="photo.jpg" alt="">

The image is w-16 below md, w-32 from md until lg, and w-48 from lg upward. Each larger condition overrides the same width property when it becomes active.

Do not use sm: to mean “on phones.” It means the sm minimum width and wider. Put the constrained layout in the base classes, then add complexity when space is available:

<section class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">...</section>

Choose breakpoints from the content. Add a second column when two useful cards fit, not because a device list calls something a tablet. Browser windows, split-screen views, zoom, sidebars, and embedded components make device labels unreliable.

Variants can target bounded ranges with a minimum and maximum condition when a design genuinely needs one. Prefer a few cumulative rules first; many narrow ranges make the cascade difficult to understand.

Responsive changes can affect access. hidden md:block removes content below md, including from keyboard and accessibility navigation. Use it only for duplicate or genuinely optional content, not to hide the only navigation without providing an equivalent control.

Test by resizing slowly rather than checking three preset screenshots. Watch for the exact width where text wraps, controls collide, or the reading order stops making sense. Also test zoom, which reduces the effective CSS viewport width and should activate the compact layout.

Your action is to build a one-column list that gains columns only when cards remain readable. Record the content failure width that justified each variant and verify that no action disappears at 200% zoom.