Responsive design

Also called responsive layout, responsive web design, or mobile-friendly design

Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.

const PLANS = [
  { name: 'Hobby', price: 0, blurb: 'For side projects and experiments.' },
  { name: 'Pro', price: 24, blurb: 'For people who ship every week.' },
  { name: 'Team', price: 79, blurb: 'For teams building together.' }
];

// Mobile-first: unprefixed classes apply at every width, and
// sm: (640px) and lg: (1024px) take over from those widths up.
export function PricingPlans() {
  return (
    <main className='mx-auto max-w-6xl px-4 py-12 sm:px-6'>
      <h1 className='text-center text-4xl font-bold tracking-tight lg:text-6xl'>
        Simple pricing
      </h1>
      <div className='mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
        {PLANS.map((plan) => (
          <article
            key={plan.name}
            className='flex flex-col rounded-2xl border p-6'
          >
            <h2 className='font-semibold'>{plan.name}</h2>
            <p className='mt-2 text-3xl font-bold'>${plan.price}/mo</p>
            <p className='mt-2 flex-1 text-sm text-muted-foreground'>
              {plan.blurb}
            </p>
            {/* min-h-11 keeps the tap target at least 44px tall. */}
            <button
              type='button'
              className='mt-6 min-h-11 rounded-lg bg-primary text-sm font-medium text-primary-foreground'
            >
              Choose {plan.name}
            </button>
          </article>
        ))}
      </div>
    </main>
  );
}

What is Responsive design?

A responsive page reflows to fit the screen it is on. Three columns of cards on a laptop become two on a tablet and one on a phone, a row of navigation links becomes a menu button, and large headings scale down. The widths where the layout changes are called breakpoints.

Tailwind’s default breakpoints are sm 640px, md 768px, lg 1024px, xl 1280px, and 2xl 1536px. They are mobile-first: classes without a prefix apply at every size, and md:grid-cols-2 takes effect from 768px up. In plain CSS the same idea is a @media (min-width: 768px) rule.

Design for the phone first, since it has the tightest space, then add columns as room appears. Test the widths between your breakpoints too, because that is where layouts often break. Container queries (@container) go a step further: a component responds to the width of its parent, so the same card can adapt inside a sidebar or a wide grid.

All terms