Tailwind CSS Tutorial · Layout · Lesson 13 of 27

Responsive Design

Mobile-first breakpoints with sm:, md:, lg:, xl: and 2xl: prefixes, and how to build layouts that adapt to any screen.

Create a free account to save this page, take notes and track your progress. Sign in

Mobile first

Unprefixed classes apply to every screen size. A prefix like md: means "from this width and up":

Prefix	Min width
`sm:`	40rem (640px)
`md:`	48rem (768px)
`lg:`	64rem (1024px)
`xl:`	80rem (1280px)
`2xl:`	96rem (1536px)

So text-center md:text-left is centred on phones and left-aligned from tablets up. Design the phone layout first, then add prefixes for larger screens. Use max-md: to target only smaller screens.

The preview below is narrow when you read on a phone and wide on a desktop; resize your browser to watch the layout change.

Columns by breakpointTry it yourself

<div class="grid gap-4 p-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-xl bg-orange-100 p-4"><p class="font-semibold">Plan</p><p class="text-sm text-gray-600">1 column on phones</p></div>
  <div class="rounded-xl bg-orange-100 p-4"><p class="font-semibold">Build</p><p class="text-sm text-gray-600">2 from sm:</p></div>
  <div class="rounded-xl bg-orange-100 p-4"><p class="font-semibold">Test</p><p class="text-sm text-gray-600">4 from lg:</p></div>
  <div class="rounded-xl bg-orange-100 p-4"><p class="font-semibold">Ship</p><p class="text-sm text-gray-600">mobile first</p></div>
</div>

Show and hide

Hide, show and change directionTry it yourself

<div class="p-4">
  <p class="rounded bg-rose-100 p-3 md:hidden">Shown below 768px (phones), hidden from md: up</p>
  <p class="hidden rounded bg-emerald-100 p-3 md:block">Shown from md: (768px) and wider</p>
  <div class="mt-3 flex flex-col gap-2 md:flex-row">
    <button class="rounded bg-gray-900 px-4 py-2 text-white">Stacked on phones</button>
    <button class="rounded bg-gray-200 px-4 py-2">Side by side on md+</button>
  </div>
</div>

A common mistake

sm: does not mean "small screens only". sm:hidden hides an element on screens 640px and wider. To hide on phones only, use hidden sm:block.

Test yourself

What does md:flex mean?

Use display: flex at 768px and wider
Use flex only on medium screens
Use flex below 768px
Use flex on tablets only

Show answer

Answer: Use display: flex at 768px and wider

Breakpoint prefixes are min-width: they apply from that size upwards.

Was this page helpful?