Responsive design ensures your websites look great on all devices—from phones to tablets to desktops. Tailwind makes responsive design incredibly easy with its mobile-first breakpoint system. In this lesson, you'll learn how to use breakpoints, understand the mobile-first approach, and create layouts that adapt beautifully to any screen size.

Mobile-First Philosophy

Tailwind uses a mobile-first approach, which means:

How Mobile-First Works

Unprefixed utilities apply to all screen sizes (including mobile)
Responsive prefixes override on larger screens
Start with mobile, progressively enhance for larger screens

HTML

<!-- Mobile-first example -->
<div class="text-base md:text-lg lg:text-xl">
  <!-- Mobile (all sizes): text-base (16px)
       Tablet (768px+): text-lg (18px)  
       Desktop (1024px+): text-xl (20px) -->
  Responsive text
</div>

<!-- Width example -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Mobile: Full width (100%)
       Tablet: Half width (50%)
       Desktop: One-third width (33.33%) -->
  Responsive width
</div>

📱 Why Mobile-First?

Mobile traffic dominates: Most users visit on mobile devices
Performance: Start with the smallest viewport, add complexity as screen grows
Simpler CSS: Fewer overrides, cleaner code
Better UX: Forces you to prioritize essential content

Tailwind's Default Breakpoints

Tailwind provides five default breakpoints based on common device sizes:

Default Breakpoint Scale

sm - 640px and up (landscape phones, small tablets)
md - 768px and up (tablets)
lg - 1024px and up (laptops, small desktops)
xl - 1280px and up (desktops)
2xl - 1536px and up (large desktops)

How Breakpoints Work

HTML

<!-- Apply different colors at different breakpoints -->
<div class="bg-blue-500 sm:bg-green-500 md:bg-purple-500 lg:bg-red-500 xl:bg-yellow-500">
  <!-- Mobile (0-639px): Blue
       Small (640px+): Green
       Medium (768px+): Purple
       Large (1024px+): Red
       XL (1280px+): Yellow -->
  Watch me change color as you resize!
</div>

Breakpoint Ranges

Understanding the ranges helps you design for specific device sizes:

TEXT

Mobile:        0px - 639px   (no prefix needed)
Small:       640px - 767px   (sm:)
Medium:      768px - 1023px  (md:)
Large:      1024px - 1279px  (lg:)
XL:         1280px - 1535px  (xl:)
2XL:        1536px+          (2xl:)

💡 Min-Width Based

Tailwind breakpoints are min-width based. This means md:text-lg applies at 768px and above, not just at 768px.

Using Responsive Utilities

You can make almost any Tailwind utility responsive by adding a breakpoint prefix:

Typography

HTML

<!-- Responsive font size -->
<h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl">
  Scaling Heading
</h1>

<!-- Responsive font weight -->
<p class="font-normal md:font-semibold lg:font-bold">
  Progressive weight
</p>

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

Layout

HTML

<!-- Responsive flexbox direction -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<!-- Mobile: Stacked vertically
     Tablet+: Horizontal row -->

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>
<!-- Mobile: 1 column
     Small: 2 columns
     Large: 3 columns
     XL: 4 columns -->

<!-- Responsive display -->
<div class="hidden md:block">
  Visible on tablet and desktop only
</div>

<div class="block md:hidden">
  Visible on mobile only
</div>

Spacing

HTML

<!-- Responsive padding -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  Increasing padding on larger screens
</div>

<!-- Responsive margin -->
<div class="mb-4 md:mb-6 lg:mb-8">
  Increasing bottom margin
</div>

<!-- Responsive gap -->
<div class="flex gap-2 md:gap-4 lg:gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Sizing

HTML

<!-- Responsive width -->
<div class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
  Progressively narrower
</div>

<!-- Responsive max-width -->
<div class="max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
  Expanding container
</div>

<!-- Responsive height -->
<div class="h-48 md:h-64 lg:h-96">
  Taller on larger screens
</div>

Visibility

HTML

<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">
  Desktop-only content
</div>

<!-- Show on mobile, hide on desktop -->
<div class="block lg:hidden">
  Mobile-only content
</div>

<!-- Show only on tablets -->
<div class="hidden md:block lg:hidden">
  Tablet-only content
</div>

<!-- Mobile navigation vs desktop navigation -->
<nav class="lg:hidden">
  <!-- Mobile hamburger menu -->
  <button>☰</button>
</nav>

<nav class="hidden lg:flex gap-6">
  <!-- Desktop horizontal menu -->
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Common Responsive Patterns

Pattern 1: Responsive Hero Section

HTML

<section class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto text-center">
    <!-- Heading scales up -->
    <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
      Build Amazing Things
    </h1>
    
    <!-- Subtitle scales up -->
    <p class="text-lg sm:text-xl md:text-2xl text-gray-600 mb-6 sm:mb-8 max-w-3xl mx-auto">
      Create beautiful, responsive websites with Tailwind CSS
    </p>
    
    <!-- Buttons stack on mobile, side-by-side on tablet+ -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="bg-blue-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg text-base sm:text-lg">
        Get Started
      </button>
      <button class="bg-gray-200 text-gray-800 px-6 sm:px-8 py-3 sm:py-4 rounded-lg text-base sm:text-lg">
        Learn More
      </button>
    </div>
  </div>
</section>

Pattern 2: Responsive Card Grid

HTML

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
  <!-- Card -->
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <img src="image.jpg" alt="Card" class="w-full h-40 sm:h-48 object-cover">
    <div class="p-4 sm:p-6">
      <h3 class="text-lg sm:text-xl font-bold mb-2">Card Title</h3>
      <p class="text-sm sm:text-base text-gray-600">Card description...</p>
    </div>
  </div>
  
  <!-- Repeat cards... -->
</div>
<!-- Mobile: 1 column
     Small: 2 columns
     Large: 3 columns
     XL: 4 columns -->

Pattern 3: Responsive Navigation

HTML

<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 items-center h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <img src="logo.svg" alt="Logo" class="h-8">
      </div>
      
      <!-- Desktop menu (hidden on mobile) -->
      <div class="hidden md:flex gap-6">
        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">About</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Services</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>
      </div>
      
      <!-- Mobile menu button (hidden on desktop) -->
      <button class="md:hidden">
        <svg class="w-6 h-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>
</nav>

Pattern 4: Responsive Sidebar Layout

HTML

<div class="flex flex-col lg:flex-row min-h-screen">
  <!-- Sidebar (full width on mobile, fixed width on desktop) -->
  <aside class="w-full lg:w-64 bg-gray-800 text-white p-4 lg:p-6">
    <h2 class="text-xl font-bold mb-4">Sidebar</h2>
    <nav class="space-y-2">
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 1</a>
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 2</a>
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 3</a>
    </nav>
  </aside>
  
  <!-- Main content (grows to fill space) -->
  <main class="flex-1 p-4 sm:p-6 lg:p-8 bg-gray-50">
    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 sm:mb-6">
      Main Content
    </h1>
    <p class="text-base sm:text-lg">Content goes here...</p>
  </main>
</div>

Pattern 5: Responsive Form

HTML

<form class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
  <!-- Two-column layout on larger screens -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-6">
    <div>
      <label class="block text-sm font-medium mb-2">First Name</label>
      <input 
        type="text"
        class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
      >
    </div>
    <div>
      <label class="block text-sm font-medium mb-2">Last Name</label>
      <input 
        type="text"
        class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
      >
    </div>
  </div>
  
  <!-- Full-width email field -->
  <div class="mb-6">
    <label class="block text-sm font-medium mb-2">Email</label>
    <input 
      type="email"
      class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
    >
  </div>
  
  <!-- Buttons stack on mobile, side-by-side on tablet+ -->
  <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
    <button class="flex-1 sm:flex-none bg-blue-600 text-white px-6 py-3 rounded-lg">
      Submit
    </button>
    <button class="flex-1 sm:flex-none bg-gray-200 text-gray-800 px-6 py-3 rounded-lg">
      Cancel
    </button>
  </div>
</form>

Interactive Responsive Preview

See how responsive utilities work across different screen sizes:

Responsive Design Preview

Resize to see how the design adapts to different screens

Desktop≥ 1024px

Width: 100%

localhost:3000

<div class="text-center"> <h3 class="font-bold mb-2 text-lg sm:text-xl md:text-2xl">Responsive Box</h3> <p class="text-sm sm:text-base md:text-lg"> Watch the background color, padding, and text size change across breakpoints! </p> <div class="mt-4 p-3 bg-white/20 rounded"> <p class="text-xs sm:text-sm md:text-base"> Mobile: Blue • Tablet: Purple • Desktop: Green </p> </div> </div>

Mobile

p-4 bg-blue-500 text-white rounded-lg

Tablet (sm:)

p-6 bg-purple-500 text-white rounded-lg text-lg

Desktop (lg:)

p-8 bg-green-500 text-white rounded-lg text-xl

Targeting Specific Breakpoint Ranges

Sometimes you need styles for a specific breakpoint range only:

HTML

<!-- Only on small screens (640px - 767px) -->
<div class="sm:block md:hidden">
  Visible only on small screens
</div>

<!-- Only on medium screens (768px - 1023px) -->
<div class="md:block lg:hidden">
  Visible only on medium screens
</div>

<!-- Only on large screens (1024px - 1279px) -->
<div class="lg:block xl:hidden">
  Visible only on large screens
</div>

<!-- Mobile and tablet, hide on desktop -->
<div class="block lg:hidden">
  Visible on mobile and tablet only
</div>

<!-- Tablet and desktop, hide on mobile -->
<div class="hidden md:block">
  Visible on tablet and desktop only
</div>

🎯 Targeting Strategy

To target a specific breakpoint range, combine two utilities:

Show at the starting breakpoint: md:block
Hide at the next breakpoint: lg:hidden

The Container Utility

The container utility sets max-width to match the current breakpoint:

HTML

<!-- Container with centered content -->
<div class="container mx-auto px-4">
  Content is constrained to readable widths
</div>

<!-- Container behavior at different breakpoints:
     Mobile:  100% width (minus padding)
     sm:      640px max-width
     md:      768px max-width
     lg:      1024px max-width
     xl:      1280px max-width
     2xl:     1536px max-width -->

<!-- Common pattern: Container with padding -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <h1 class="text-3xl font-bold">Page Title</h1>
  <p>Content with responsive padding...</p>
</div>

Container Best Practices

HTML

<!-- Full-width header, contained content -->
<header class="bg-blue-600 text-white py-4">
  <div class="container mx-auto px-4">
    <h1 class="text-2xl font-bold">Site Title</h1>
  </div>
</header>

<main class="container mx-auto px-4 py-8">
  <!-- Main content constrained -->
</main>

<!-- Full-width background, contained content -->
<section class="bg-gray-100 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold mb-6">Section Title</h2>
    <!-- Content -->
  </div>
</section>

Responsive Images

Make images work beautifully across all screen sizes:

HTML

<!-- Responsive image that maintains aspect ratio -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full h-auto"
>

<!-- Image with responsive height -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full h-48 sm:h-64 md:h-80 lg:h-96 object-cover rounded-lg"
>

<!-- Image that changes size at breakpoints -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
>

<!-- Responsive aspect ratio containers -->
<div class="aspect-video w-full">
  <img src="image.jpg" alt="16:9" class="w-full h-full object-cover">
</div>

<div class="aspect-square w-full sm:w-1/2 lg:w-1/3">
  <img src="image.jpg" alt="1:1" class="w-full h-full object-cover rounded-lg">
</div>

Responsive Design Playground

Practice building responsive layouts:

Build Responsive Layouts

Try different responsive utilities and breakpoints

Responsive Layout

Resize to see how this adapts

Card 1

Content adapts to screen size

Card 2

Spacing increases on larger screens

Card 3

Grid columns change per breakpoint

Responsive Design Best Practices

Follow These Guidelines:

Always start mobile-first: Design for smallest screens first
Test on real devices: Simulators don't show everything
Use consistent breakpoints: Don't add breakpoints randomly
Progressive enhancement: Add complexity as screen size grows
Touch targets on mobile: Minimum 44x44px for buttons
Readable text sizes: Never below 16px on mobile
Optimize images: Use appropriate sizes for each breakpoint
Test touch interactions: Hover states don't work on mobile
Consider landscape: Phones rotate, account for both orientations

Common Responsive Design Mistakes

Avoid These Pitfalls:

❌ Designing desktop-first: Results in bloated mobile CSS
❌ Forgetting touch targets: Buttons too small to tap
❌ Fixed pixel widths: Use relative units or breakpoints
❌ Hiding content on mobile: Mobile users deserve full content
❌ Tiny text on mobile: Unreadable text frustrates users
❌ Not testing on devices: Surprises await in real-world use
❌ Ignoring landscape mode: Phones rotate!
❌ Inconsistent spacing: Use systematic spacing scale

Key Takeaways

Tailwind uses a mobile-first approach
Five default breakpoints: sm, md, lg, xl, 2xl
Unprefixed utilities apply to all screen sizes
Responsive prefixes (like md:) apply from that breakpoint upward
Almost any utility can be made responsive
Target specific ranges by combining show/hide at different breakpoints
Use container to constrain content width
Start with mobile design, progressively enhance for larger screens
Test on real devices, not just browser resize
Consider touch interactions and viewport rotation

What's Next?

You've mastered responsive design basics! You can now create layouts that work beautifully on any device using Tailwind's breakpoint system.

In the next lesson, we'll explore Dark Mode—learning how to implement dark mode with class strategy, system preferences, and dark variant utilities to create themes your users will love.

🎯 Practice Challenge!

Build a complete landing page that's fully responsive: Create a hero section, feature grid, and footer that adapt beautifully from mobile (320px) to large desktop (1920px). Include a navigation that transforms from a hamburger menu on mobile to a horizontal menu on desktop. Make sure all text is readable and all buttons are easily tappable on mobile!

Test Your Understanding

Question 1 of 3Score: 0/0

What does 'md:text-2xl' mean?

Mobile-First Philosophy

Tailwind uses a mobile-first approach, which means:

How Mobile-First Works

Unprefixed utilities apply to all screen sizes (including mobile)
Responsive prefixes override on larger screens
Start with mobile, progressively enhance for larger screens

HTML

<!-- Mobile-first example -->
<div class="text-base md:text-lg lg:text-xl">
  <!-- Mobile (all sizes): text-base (16px)
       Tablet (768px+): text-lg (18px)  
       Desktop (1024px+): text-xl (20px) -->
  Responsive text
</div>

<!-- Width example -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Mobile: Full width (100%)
       Tablet: Half width (50%)
       Desktop: One-third width (33.33%) -->
  Responsive width
</div>

📱 Why Mobile-First?

Mobile traffic dominates: Most users visit on mobile devices
Performance: Start with the smallest viewport, add complexity as screen grows
Simpler CSS: Fewer overrides, cleaner code
Better UX: Forces you to prioritize essential content

Tailwind's Default Breakpoints

Tailwind provides five default breakpoints based on common device sizes:

Default Breakpoint Scale

sm - 640px and up (landscape phones, small tablets)
md - 768px and up (tablets)
lg - 1024px and up (laptops, small desktops)
xl - 1280px and up (desktops)
2xl - 1536px and up (large desktops)

How Breakpoints Work

HTML

<!-- Apply different colors at different breakpoints -->
<div class="bg-blue-500 sm:bg-green-500 md:bg-purple-500 lg:bg-red-500 xl:bg-yellow-500">
  <!-- Mobile (0-639px): Blue
       Small (640px+): Green
       Medium (768px+): Purple
       Large (1024px+): Red
       XL (1280px+): Yellow -->
  Watch me change color as you resize!
</div>

Breakpoint Ranges

Understanding the ranges helps you design for specific device sizes:

TEXT

Mobile:        0px - 639px   (no prefix needed)
Small:       640px - 767px   (sm:)
Medium:      768px - 1023px  (md:)
Large:      1024px - 1279px  (lg:)
XL:         1280px - 1535px  (xl:)
2XL:        1536px+          (2xl:)

💡 Min-Width Based

Tailwind breakpoints are min-width based. This means md:text-lg applies at 768px and above, not just at 768px.

Using Responsive Utilities

You can make almost any Tailwind utility responsive by adding a breakpoint prefix:

Typography

HTML

<!-- Responsive font size -->
<h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl">
  Scaling Heading
</h1>

<!-- Responsive font weight -->
<p class="font-normal md:font-semibold lg:font-bold">
  Progressive weight
</p>

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

Layout

HTML

<!-- Responsive flexbox direction -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<!-- Mobile: Stacked vertically
     Tablet+: Horizontal row -->

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>
<!-- Mobile: 1 column
     Small: 2 columns
     Large: 3 columns
     XL: 4 columns -->

<!-- Responsive display -->
<div class="hidden md:block">
  Visible on tablet and desktop only
</div>

<div class="block md:hidden">
  Visible on mobile only
</div>

Spacing

HTML

<!-- Responsive padding -->
<div class="p-4 md:p-6 lg:p-8 xl:p-12">
  Increasing padding on larger screens
</div>

<!-- Responsive margin -->
<div class="mb-4 md:mb-6 lg:mb-8">
  Increasing bottom margin
</div>

<!-- Responsive gap -->
<div class="flex gap-2 md:gap-4 lg:gap-6">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Sizing

HTML

<!-- Responsive width -->
<div class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3">
  Progressively narrower
</div>

<!-- Responsive max-width -->
<div class="max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl">
  Expanding container
</div>

<!-- Responsive height -->
<div class="h-48 md:h-64 lg:h-96">
  Taller on larger screens
</div>

Visibility

HTML

<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">
  Desktop-only content
</div>

<!-- Show on mobile, hide on desktop -->
<div class="block lg:hidden">
  Mobile-only content
</div>

<!-- Show only on tablets -->
<div class="hidden md:block lg:hidden">
  Tablet-only content
</div>

<!-- Mobile navigation vs desktop navigation -->
<nav class="lg:hidden">
  <!-- Mobile hamburger menu -->
  <button>☰</button>
</nav>

<nav class="hidden lg:flex gap-6">
  <!-- Desktop horizontal menu -->
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Common Responsive Patterns

Pattern 1: Responsive Hero Section

HTML

<section class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto text-center">
    <!-- Heading scales up -->
    <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
      Build Amazing Things
    </h1>
    
    <!-- Subtitle scales up -->
    <p class="text-lg sm:text-xl md:text-2xl text-gray-600 mb-6 sm:mb-8 max-w-3xl mx-auto">
      Create beautiful, responsive websites with Tailwind CSS
    </p>
    
    <!-- Buttons stack on mobile, side-by-side on tablet+ -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="bg-blue-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg text-base sm:text-lg">
        Get Started
      </button>
      <button class="bg-gray-200 text-gray-800 px-6 sm:px-8 py-3 sm:py-4 rounded-lg text-base sm:text-lg">
        Learn More
      </button>
    </div>
  </div>
</section>

Pattern 2: Responsive Card Grid

HTML

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
  <!-- Card -->
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <img src="image.jpg" alt="Card" class="w-full h-40 sm:h-48 object-cover">
    <div class="p-4 sm:p-6">
      <h3 class="text-lg sm:text-xl font-bold mb-2">Card Title</h3>
      <p class="text-sm sm:text-base text-gray-600">Card description...</p>
    </div>
  </div>
  
  <!-- Repeat cards... -->
</div>
<!-- Mobile: 1 column
     Small: 2 columns
     Large: 3 columns
     XL: 4 columns -->

Pattern 3: Responsive Navigation

HTML

<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 items-center h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <img src="logo.svg" alt="Logo" class="h-8">
      </div>
      
      <!-- Desktop menu (hidden on mobile) -->
      <div class="hidden md:flex gap-6">
        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">About</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Services</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>
      </div>
      
      <!-- Mobile menu button (hidden on desktop) -->
      <button class="md:hidden">
        <svg class="w-6 h-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>
</nav>

Pattern 4: Responsive Sidebar Layout

HTML

<div class="flex flex-col lg:flex-row min-h-screen">
  <!-- Sidebar (full width on mobile, fixed width on desktop) -->
  <aside class="w-full lg:w-64 bg-gray-800 text-white p-4 lg:p-6">
    <h2 class="text-xl font-bold mb-4">Sidebar</h2>
    <nav class="space-y-2">
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 1</a>
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 2</a>
      <a href="#" class="block p-2 hover:bg-gray-700 rounded">Link 3</a>
    </nav>
  </aside>
  
  <!-- Main content (grows to fill space) -->
  <main class="flex-1 p-4 sm:p-6 lg:p-8 bg-gray-50">
    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 sm:mb-6">
      Main Content
    </h1>
    <p class="text-base sm:text-lg">Content goes here...</p>
  </main>
</div>

Pattern 5: Responsive Form

HTML

<form class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8">
  <!-- Two-column layout on larger screens -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-6">
    <div>
      <label class="block text-sm font-medium mb-2">First Name</label>
      <input 
        type="text"
        class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
      >
    </div>
    <div>
      <label class="block text-sm font-medium mb-2">Last Name</label>
      <input 
        type="text"
        class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
      >
    </div>
  </div>
  
  <!-- Full-width email field -->
  <div class="mb-6">
    <label class="block text-sm font-medium mb-2">Email</label>
    <input 
      type="email"
      class="w-full border border-gray-300 rounded-lg px-3 sm:px-4 py-2"
    >
  </div>
  
  <!-- Buttons stack on mobile, side-by-side on tablet+ -->
  <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
    <button class="flex-1 sm:flex-none bg-blue-600 text-white px-6 py-3 rounded-lg">
      Submit
    </button>
    <button class="flex-1 sm:flex-none bg-gray-200 text-gray-800 px-6 py-3 rounded-lg">
      Cancel
    </button>
  </div>
</form>

Interactive Responsive Preview

See how responsive utilities work across different screen sizes:

Responsive Design Preview

Resize to see how the design adapts to different screens

Desktop≥ 1024px

Width: 100%

localhost:3000

Mobile

p-4 bg-blue-500 text-white rounded-lg

Tablet (sm:)

p-6 bg-purple-500 text-white rounded-lg text-lg

Desktop (lg:)

p-8 bg-green-500 text-white rounded-lg text-xl

Targeting Specific Breakpoint Ranges

Sometimes you need styles for a specific breakpoint range only:

HTML

<!-- Only on small screens (640px - 767px) -->
<div class="sm:block md:hidden">
  Visible only on small screens
</div>

<!-- Only on medium screens (768px - 1023px) -->
<div class="md:block lg:hidden">
  Visible only on medium screens
</div>

<!-- Only on large screens (1024px - 1279px) -->
<div class="lg:block xl:hidden">
  Visible only on large screens
</div>

<!-- Mobile and tablet, hide on desktop -->
<div class="block lg:hidden">
  Visible on mobile and tablet only
</div>

<!-- Tablet and desktop, hide on mobile -->
<div class="hidden md:block">
  Visible on tablet and desktop only
</div>

🎯 Targeting Strategy

To target a specific breakpoint range, combine two utilities:

Show at the starting breakpoint: md:block
Hide at the next breakpoint: lg:hidden

The Container Utility

The container utility sets max-width to match the current breakpoint:

HTML

<!-- Container with centered content -->
<div class="container mx-auto px-4">
  Content is constrained to readable widths
</div>

<!-- Container behavior at different breakpoints:
     Mobile:  100% width (minus padding)
     sm:      640px max-width
     md:      768px max-width
     lg:      1024px max-width
     xl:      1280px max-width
     2xl:     1536px max-width -->

<!-- Common pattern: Container with padding -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <h1 class="text-3xl font-bold">Page Title</h1>
  <p>Content with responsive padding...</p>
</div>

Container Best Practices

HTML

<!-- Full-width header, contained content -->
<header class="bg-blue-600 text-white py-4">
  <div class="container mx-auto px-4">
    <h1 class="text-2xl font-bold">Site Title</h1>
  </div>
</header>

<main class="container mx-auto px-4 py-8">
  <!-- Main content constrained -->
</main>

<!-- Full-width background, contained content -->
<section class="bg-gray-100 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold mb-6">Section Title</h2>
    <!-- Content -->
  </div>
</section>

Responsive Images

Make images work beautifully across all screen sizes:

HTML

<!-- Responsive image that maintains aspect ratio -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full h-auto"
>

<!-- Image with responsive height -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full h-48 sm:h-64 md:h-80 lg:h-96 object-cover rounded-lg"
>

<!-- Image that changes size at breakpoints -->
<img 
  src="image.jpg" 
  alt="Description" 
  class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
>

<!-- Responsive aspect ratio containers -->
<div class="aspect-video w-full">
  <img src="image.jpg" alt="16:9" class="w-full h-full object-cover">
</div>

<div class="aspect-square w-full sm:w-1/2 lg:w-1/3">
  <img src="image.jpg" alt="1:1" class="w-full h-full object-cover rounded-lg">
</div>

Responsive Design Playground

Practice building responsive layouts:

Build Responsive Layouts

Try different responsive utilities and breakpoints

Responsive Layout

Resize to see how this adapts

Card 1

Content adapts to screen size

Card 2

Spacing increases on larger screens

Card 3

Grid columns change per breakpoint

Responsive Design Best Practices

Follow These Guidelines:

Always start mobile-first: Design for smallest screens first
Test on real devices: Simulators don't show everything
Use consistent breakpoints: Don't add breakpoints randomly
Progressive enhancement: Add complexity as screen size grows
Touch targets on mobile: Minimum 44x44px for buttons
Readable text sizes: Never below 16px on mobile
Optimize images: Use appropriate sizes for each breakpoint
Test touch interactions: Hover states don't work on mobile
Consider landscape: Phones rotate, account for both orientations

Common Responsive Design Mistakes

Avoid These Pitfalls:

❌ Designing desktop-first: Results in bloated mobile CSS
❌ Forgetting touch targets: Buttons too small to tap
❌ Fixed pixel widths: Use relative units or breakpoints
❌ Hiding content on mobile: Mobile users deserve full content
❌ Tiny text on mobile: Unreadable text frustrates users
❌ Not testing on devices: Surprises await in real-world use
❌ Ignoring landscape mode: Phones rotate!
❌ Inconsistent spacing: Use systematic spacing scale

Key Takeaways

Tailwind uses a mobile-first approach
Five default breakpoints: sm, md, lg, xl, 2xl
Unprefixed utilities apply to all screen sizes
Responsive prefixes (like md:) apply from that breakpoint upward
Almost any utility can be made responsive
Target specific ranges by combining show/hide at different breakpoints
Use container to constrain content width
Start with mobile design, progressively enhance for larger screens
Test on real devices, not just browser resize
Consider touch interactions and viewport rotation

What's Next?

You've mastered responsive design basics! You can now create layouts that work beautifully on any device using Tailwind's breakpoint system.

In the next lesson, we'll explore Dark Mode—learning how to implement dark mode with class strategy, system preferences, and dark variant utilities to create themes your users will love.

🎯 Practice Challenge!

Test Your Understanding

Question 1 of 3Score: 0/0

Responsive Design Basics

Mobile-First Philosophy

How Mobile-First Works

Tailwind's Default Breakpoints

Default Breakpoint Scale

How Breakpoints Work

Breakpoint Ranges

Using Responsive Utilities

Typography

Layout

Spacing

Sizing

Visibility

Common Responsive Patterns

Pattern 1: Responsive Hero Section

Pattern 2: Responsive Card Grid

Pattern 3: Responsive Navigation

Pattern 4: Responsive Sidebar Layout

Pattern 5: Responsive Form

Interactive Responsive Preview

Responsive Design Preview

Targeting Specific Breakpoint Ranges

The Container Utility

Container Best Practices

Responsive Images

Responsive Design Playground

Build Responsive Layouts

Card 1

Card 2

Card 3

Responsive Design Best Practices

Follow These Guidelines:

Common Responsive Design Mistakes

Avoid These Pitfalls:

Key Takeaways

What's Next?

Test Your Understanding

What does 'md:text-2xl' mean?

Just mastered responsive design with Tailwind! Building mobile-first layouts is so intuitive.

Master Responsive Design

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

TailwindCSS Tutorials

Responsive Design Basics

Mobile-First Philosophy

How Mobile-First Works

Tailwind's Default Breakpoints

Default Breakpoint Scale

How Breakpoints Work

Breakpoint Ranges

Using Responsive Utilities

Typography

Layout

Spacing

Sizing

Visibility

Common Responsive Patterns

Pattern 1: Responsive Hero Section

Pattern 2: Responsive Card Grid

Pattern 3: Responsive Navigation

Pattern 4: Responsive Sidebar Layout

Pattern 5: Responsive Form

Interactive Responsive Preview

Responsive Design Preview

Targeting Specific Breakpoint Ranges

The Container Utility

Container Best Practices

Responsive Images

Responsive Design Playground

Build Responsive Layouts

Card 1

Card 2

Card 3

Responsive Design Best Practices

Follow These Guidelines:

Common Responsive Design Mistakes