Recipe: Responsive breakpoint strategy

A single-source-of-truth approach to responsive design tokens using Tailwind CSS custom screens and container queries.

Breakpoint scale

Token	Min width	Target
sm	640px	Large phones
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Desktops
2xl	1536px	Wide screens

Usage pattern

Prefer mobile-first stacking. Override at each breakpoint only when the layout demands it. Avoid sprinkling arbitrary values — lean on the token scale above.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* cards */}
</div>

Container queries

For components that live in variable-width slots, use container queries instead of viewport breakpoints. This keeps the component portable.

<div className="@container">
  <div className="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
    {/* adaptive grid */}
  </div>
</div>