Responsive Design

Tailwind is mobile-first. Unprefixed classes apply everywhere; prefixed classes apply at that breakpoint and up.

Breakpoints

Mobile-First in Practice

Write the small-screen layout first, then add larger-screen overrides:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <!-- 1 column on phones, 2 on tablets, 4 on desktop -->
</div>

Do not write lg: first and try to undo it for mobile.

Text and Spacing

<h1 class="text-2xl sm:text-3xl lg:text-5xl">Responsive heading</h1>
<div class="p-4 md:p-8 lg:p-12">Responsive padding</div>

Show and Hide

<nav class="hidden md:flex">Desktop nav</nav>
<button class="md:hidden">Mobile menu</button>

Common for navigation: full menu on desktop, a button on mobile.

Stacking and Rows

<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <div>One</div>
  <div>Two</div>
</div>

Stacked on mobile, side by side from md up.

Testing Responsively

• Use the browser devtools device toolbar.
• Resize to each breakpoint edge.
• Test real devices for touch targets and fonts.

Best Practices

1. Design for the smallest screen first.
2. Keep breakpoints few — sm, md, lg cover most needs.
3. Use fluid where possible — max-w-* and percentages reduce overrides.
4. Mind tap targets — At least 44px on touch screens.

Common Mistakes

1. Desktop-first thinking — Leads to max-* overrides everywhere.
2. Too many breakpoints — Usually a sign of a rigid layout.
3. Hiding important content on mobile — Do not remove essential actions.
4. Forgetting the container — max-w-* mx-auto keeps content readable.