Breakpoints

Build responsive layouts with sm, md, lg, xl, 2xl

Tailwind is mobile-first. Unprefixed utilities apply at all sizes. Prefixed utilities (sm:, md:, etc.) apply at that breakpoint and above.

Simulate Breakpoint

At base:

Columns: 1 | Font: text-sm

Viewport: < 640pxbase

Tailwind CSS

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
  <div class="bg-orange-500 sm:bg-amber-500 lg:bg-emerald-500">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

15 / 23