sm: targets large phones — everything from 640px wide. Large phones in landscape and small tablets. The classic "cards go two-up" breakpoint.

What usually changes here#

  • Cards: 1 → 2 columns
  • Navbars may unfold partially
  • Padding steps up (p-4 → p-6)

Example#

html
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">…</div>

Combining#

Stack with the other screens and with variants: sm:hover:bg-blue-600. Order: screen first, then state.

responsive/xs|xs: (480px) · responsive/md|md: (768px) · responsive/breakpoint-strategy|Breakpoint strategy