04 - Responsive Design

Mobile-First Approach

Tailwind uses a mobile-first breakpoint system. Styles without prefixes apply to all screen sizes, then you add breakpoints for larger screens.

<!-- Base styles (mobile) + larger screens -->
<div class="text-sm md:text-base lg:text-lg">
  <!-- Small on mobile, medium on tablets, large on desktop -->
</div>

Breakpoints

Tailwind's default breakpoints:

<!-- Mobile first: padding increases with screen size -->
<div class="p-2 sm:p-4 md:p-6 lg:p-8">
  Responsive padding
</div>

<!-- Text size scales up -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive heading
</h1>

Responsive Layout

Grid Columns

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Card 1</div>
  <div class="bg-blue-500 p-4">Card 2</div>
  <div class="bg-blue-500 p-4">Card 3</div>
  <div class="bg-blue-500 p-4">Card 4</div>
  <div class="bg-blue-500 p-4">Card 5</div>
  <div class="bg-blue-500 p-4">Card 6</div>
</div>

<!-- 2 columns on mobile, 4 on larger screens -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- Cards -->
</div>

Flexbox Direction

<!-- Column on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-blue-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-red-500 p-4">Item 3</div>
</div>

Hide/Show Elements

Control visibility at different breakpoints:

<!-- Hidden on mobile, visible on desktop -->
<div class="hidden md:block">
  Desktop only content
</div>

<!-- Visible on mobile, hidden on desktop -->
<div class="block md:hidden">
  Mobile only content
</div>

<!-- Show different content per screen size -->
<div>
  <div class="md:hidden">Mobile menu icon</div>
  <div class="hidden md:block">Full navigation menu</div>
</div>

Responsive Text

<!-- Text size -->
<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
  Responsive heading
</h1>

<!-- Text alignment -->
<p class="text-center md:text-left">
  Centered on mobile, left-aligned on tablet+
</p>

<!-- Line height -->
<p class="leading-tight md:leading-normal lg:leading-relaxed">
  Tighter line height on mobile
</p>

Responsive Spacing

<!-- Padding scales up -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  More padding on larger screens
</div>

<!-- Margin changes -->
<div class="mx-auto max-w-full sm:max-w-xl md:max-w-2xl lg:max-w-4xl">
  Container width grows with screen size
</div>

<!-- Gap in flex/grid -->
<div class="flex gap-2 sm:gap-4 md:gap-6 lg:gap-8">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Responsive Width

<!-- Full width on mobile, contained on desktop -->
<div class="w-full md:w-3/4 lg:w-1/2">
  Responsive width
</div>

<!-- Max width -->
<div class="max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl mx-auto">
  Responsive max width container
</div>

<!-- Different widths -->
<div class="w-full sm:w-64 md:w-80 lg:w-96">
  Fixed widths at each breakpoint
</div>

Responsive Images

<!-- Responsive image container -->
<div class="w-full h-48 sm:h-64 md:h-80 lg:h-96">
  <img src="image.jpg" alt="" class="w-full h-full object-cover rounded-lg" />
</div>

<!-- Hide image on mobile -->
<img src="hero.jpg" alt="" class="hidden md:block w-full" />

<!-- Different aspect ratios -->
<div class="aspect-square sm:aspect-video md:aspect-[4/3]">
  <img src="image.jpg" alt="" class="w-full h-full object-cover" />
</div>

Practical Examples

Responsive Navigation

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

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

      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="text-gray-700">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu (hidden by default) -->
  <div class="md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Home</a>
      <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">About</a>
      <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Services</a>
      <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded">Contact</a>
    </div>
  </div>
</nav>

Responsive Hero Section

<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20 lg:py-24">
    <div class="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
      <!-- Content -->
      <div class="flex-1 text-center md:text-left">
        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6">
          Welcome to Our Platform
        </h1>
        <p class="text-lg sm:text-xl md:text-2xl mb-6 sm:mb-8 opacity-90">
          Build amazing things with modern tools
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <button class="bg-white text-blue-600 px-6 sm:px-8 py-3 rounded-lg font-medium hover:bg-gray-100">
            Get Started
          </button>
          <button class="border-2 border-white px-6 sm:px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600">
            Learn More
          </button>
        </div>
      </div>

      <!-- Image -->
      <div class="flex-1 w-full md:w-auto">
        <img src="hero.png" alt="Hero" class="w-full max-w-lg mx-auto" />
      </div>
    </div>
  </div>
</section>

Responsive Card Grid

<section class="py-12 sm:py-16 lg:py-20 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-8 sm:mb-12">
      Our Services
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Card 1 -->
      <div class="bg-white p-6 sm:p-8 rounded-lg shadow-md hover:shadow-xl transition">
        <div class="w-12 h-12 sm:w-16 sm:h-16 bg-blue-500 rounded-lg mb-4 sm:mb-6"></div>
        <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">Service 1</h3>
        <p class="text-gray-600 text-sm sm:text-base">
          Description of the service goes here
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-white p-6 sm:p-8 rounded-lg shadow-md hover:shadow-xl transition">
        <div class="w-12 h-12 sm:w-16 sm:h-16 bg-green-500 rounded-lg mb-4 sm:mb-6"></div>
        <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">Service 2</h3>
        <p class="text-gray-600 text-sm sm:text-base">
          Description of the service goes here
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-white p-6 sm:p-8 rounded-lg shadow-md hover:shadow-xl transition">
        <div class="w-12 h-12 sm:w-16 sm:h-16 bg-purple-500 rounded-lg mb-4 sm:mb-6"></div>
        <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3">Service 3</h3>
        <p class="text-gray-600 text-sm sm:text-base">
          Description of the service goes here
        </p>
      </div>
    </div>
  </div>
</section>

Responsive Sidebar Layout

<div class="flex flex-col lg:flex-row min-h-screen">
  <!-- Sidebar -->
  <aside class="bg-gray-800 text-white w-full lg:w-64 p-4 lg:p-6">
    <h2 class="text-xl font-bold mb-4 lg:mb-6">Navigation</h2>
    <nav class="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-visible">
      <a href="#" class="px-4 py-2 hover:bg-gray-700 rounded whitespace-nowrap">Dashboard</a>
      <a href="#" class="px-4 py-2 hover:bg-gray-700 rounded whitespace-nowrap">Analytics</a>
      <a href="#" class="px-4 py-2 hover:bg-gray-700 rounded whitespace-nowrap">Settings</a>
      <a href="#" class="px-4 py-2 hover:bg-gray-700 rounded whitespace-nowrap">Logout</a>
    </nav>
  </aside>

  <!-- Main content -->
  <main class="flex-1 p-4 sm:p-6 lg:p-8 bg-gray-100">
    <h1 class="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6">Dashboard</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6">
      <!-- Stat cards -->
      <div class="bg-white p-4 sm:p-6 rounded-lg shadow">
        <p class="text-gray-600 text-sm">Total Users</p>
        <p class="text-2xl sm:text-3xl font-bold mt-2">1,234</p>
      </div>
      <div class="bg-white p-4 sm:p-6 rounded-lg shadow">
        <p class="text-gray-600 text-sm">Revenue</p>
        <p class="text-2xl sm:text-3xl font-bold mt-2">$56,789</p>
      </div>
      <div class="bg-white p-4 sm:p-6 rounded-lg shadow">
        <p class="text-gray-600 text-sm">Orders</p>
        <p class="text-2xl sm:text-3xl font-bold mt-2">432</p>
      </div>
      <div class="bg-white p-4 sm:p-6 rounded-lg shadow">
        <p class="text-gray-600 text-sm">Growth</p>
        <p class="text-2xl sm:text-3xl font-bold mt-2">+12%</p>
      </div>
    </div>
  </main>
</div>

Container Classes

Tailwind provides a container class that centers content and applies responsive max-widths:

<!-- Responsive container -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Content automatically adjusts max-width at each breakpoint -->
  <h1>My Content</h1>
</div>

Key Takeaways

• Tailwind is mobile-first — base styles apply to all sizes
• Add breakpoint prefixes to override on larger screens: sm:, md:, lg:, xl:, 2xl:
• Stack breakpoints to scale properties: text-sm md:text-base lg:text-lg
• Use hidden and block to show/hide elements at different sizes
• Grid and flex layouts adapt easily with responsive utilities
• Always test on actual devices or use browser dev tools
• Start with mobile design, then enhance for larger screens