Tailwind Responsive Breakpoints

Tailwind is mobile-first. Unprefixed utilities apply to all screen sizes. Breakpoint prefixes like md: apply from that width and up. Stack sizes to progressively enhance.

Breakpoint reference

• sm: — 640px and up

• md: — 768px and up

• lg: — 1024px and up

• xl: — 1280px and up

• 2xl: — 1536px and up

Mobile-first responsive grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-4 rounded-lg shadow">Card 1</div>
  <div class="bg-white p-4 rounded-lg shadow">Card 2</div>
  <div class="bg-white p-4 rounded-lg shadow">Card 3</div>
</div>

Responsive typography and spacing

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<section class="px-4 sm:px-6 lg:px-8 py-12 lg:py-24">
  Content with responsive padding
</section>

Never use sm: to mean small screens. It means 640px and above. Start with the base (mobile) style, then add breakpoint prefixes for larger screens.