Skip to main content

Responsive Design

In this chapter, you learn how to implement responsive design with Tailwind CSS.

Breakpoints​

Tailwind CSS adopts a mobile-first approach.

PrefixMin widthCSS
sm40rem (640px)@media (width >= 40rem)
md48rem (768px)@media (width >= 48rem)
lg64rem (1024px)@media (width >= 64rem)
xl80rem (1280px)@media (width >= 80rem)
2xl96rem (1536px)@media (width >= 96rem)

The mobile-first mindset​

<!-- 1 column on mobile, 2 columns at md and up, 3 columns at lg and up -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Breakpoints mean "and up"

A class is "applied at that breakpoint and above." md: takes effect at 768px and up.

Basic usage​

Changing the layout​

<!-- Mobile: stacked vertically, desktop: side by side -->
<div class="flex flex-col md:flex-row">
  <div class="md:w-1/3">Sidebar</div>
  <div class="md:w-2/3">Main content</div>
</div>

Changing the size​

<!-- Change padding per breakpoint -->
<div class="p-4 md:p-6 lg:p-8 xl:p-10">
  Responsive padding
</div>

<!-- Change font size per breakpoint -->
<h1 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
  Responsive heading
</h1>

Showing and hiding​

<!-- Hidden on mobile, shown at md and up -->
<div class="hidden md:block">
  Desktop only
</div>

<!-- Shown on mobile, hidden at md and up -->
<div class="block md:hidden">
  Mobile only
</div>

max-* variants​

The max-* variants (introduced in v3.2) for specifying a maximum width are also available.

<!-- Applied only below 768px -->
<div class="max-md:hidden">Hidden below 768px</div>

<!-- Applied only below 1024px -->
<div class="max-lg:flex-col">Stacked vertically below 1024px</div>

Custom breakpoints in v4​

In v4, you can define breakpoints directly in CSS.

@import "tailwindcss";

@theme {
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1920px;
}
<div class="xs:block 3xl:max-w-7xl">
  Custom breakpoint
</div>

Arbitrary values​

<!-- Apply styles only at a specific width -->
<div class="min-[500px]:flex min-[800px]:grid">
  Arbitrary breakpoint
</div>

<div class="max-[600px]:hidden">
  Hidden below 600px
</div>

Practical examples​

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <a href="/" class="font-bold text-xl">Logo</a>
      </div>

      <!-- Desktop menu -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </div>

      <!-- Mobile menu button -->
      <div class="flex items-center md:hidden">
        <button class="p-2">
          <svg class="w-6 h-6">...</svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Hero section​

<section class="py-12 md:py-20 lg:py-28 px-4">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold">
      Responsive hero
    </h1>
    <p class="mt-4 md:mt-6 text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
      A hero section that adapts to a variety of screen sizes
    </p>
    <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
      <button class="px-6 py-3 bg-blue-500 text-white rounded-lg">
        Get started
      </button>
      <button class="px-6 py-3 border border-gray-300 rounded-lg">
        Learn more
      </button>
    </div>
  </div>
</section>

Card grid​

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
  <div class="bg-white rounded-lg shadow-sm p-4 md:p-6">
    <img src="..." class="w-full aspect-video object-cover rounded-sm" />
    <h3 class="mt-4 text-lg md:text-xl font-bold">Card 1</h3>
    <p class="mt-2 text-sm md:text-base text-gray-600">Description...</p>
  </div>
  <!-- Repeat -->
</div>

Two-column layout​

<div class="flex flex-col lg:flex-row gap-8">
  <!-- Main content -->
  <main class="lg:w-2/3 xl:w-3/4">
    <article class="prose max-w-none">
      Content...
    </article>
  </main>

  <!-- Sidebar -->
  <aside class="lg:w-1/3 xl:w-1/4">
    <div class="lg:sticky lg:top-4">
      Sidebar content
    </div>
  </aside>
</div>

Table (mobile-friendly)​

<!-- Desktop: table view -->
<table class="hidden md:table w-full">
  <thead>
    <tr class="border-b">
      <th class="text-left p-4">Name</th>
      <th class="text-left p-4">Email</th>
      <th class="text-left p-4">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b">
      <td class="p-4">Taro Tanaka</td>
      <td class="p-4">tanaka@example.com</td>
      <td class="p-4">Active</td>
    </tr>
  </tbody>
</table>

<!-- Mobile: card view -->
<div class="md:hidden space-y-4">
  <div class="bg-white rounded-lg shadow-sm p-4">
    <div class="font-bold">Taro Tanaka</div>
    <div class="text-sm text-gray-600">tanaka@example.com</div>
    <div class="mt-2">
      <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-sm">
        Active
      </span>
    </div>
  </div>
</div>
<footer class="bg-gray-900 text-white py-12 px-4">
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8">
    <div class="col-span-2 md:col-span-1">
      <h3 class="font-bold text-lg mb-4">Company</h3>
      <p class="text-gray-400 text-sm">
        Company description...
      </p>
    </div>
    <div>
      <h3 class="font-bold mb-4">Product</h3>
      <ul class="space-y-2 text-gray-400 text-sm">
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-bold mb-4">Resources</h3>
      <ul class="space-y-2 text-gray-400 text-sm">
        <li><a href="#">Blog</a></li>
        <li><a href="#">Docs</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-bold mb-4">Legal</h3>
      <ul class="space-y-2 text-gray-400 text-sm">
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
      </ul>
    </div>
  </div>
</footer>

Responsive best practices​

1. Design mobile-first​

<!-- Good: mobile-first -->
<div class="text-sm md:text-base lg:text-lg">
  Text
</div>

<!-- Bad: desktop-first -->
<div class="text-lg max-lg:text-base max-md:text-sm">
  Text
</div>

2. Content-based breakpoints​

<!-- Set a breakpoint where the layout breaks -->
<div class="grid grid-cols-1 min-[600px]:grid-cols-2 min-[900px]:grid-cols-3">
  ...
</div>

3. Avoid excessive changes​

<!-- Good: the minimum necessary changes -->
<div class="p-4 md:p-8">...</div>

<!-- Avoid: excessive changes -->
<div class="p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8">...</div>

Summary​

  • Mobile-first approach (small to large)
  • Specify breakpoints with sm: / md: / lg: / xl: / 2xl:
  • Specify conditions below a breakpoint with max-* variants (v3.2 and later)
  • Toggle visibility with hidden and block / flex
  • Adjust layout, size, and spacing responsively