Responsive Design

Tailwind's responsive design is mobile-first and incredibly intuitive.

Breakpoints

Tailwind's default breakpoints:

Mobile-First Approach

Start with mobile styles, then add breakpoint prefixes for larger screens:

<!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

Responsive Text

<!-- Text grows with screen size -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Heading
</h1>

Responsive Spacing

<!-- Padding increases on larger screens -->
<div class="p-4 md:p-8 lg:p-12 bg-blue-100">
  Responsive padding
</div>

Show/Hide Elements

<!-- 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>

Responsive Flexbox

<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Sidebar</div>
  <div class="flex-1">Main content</div>
</div>

Practical Examples

Responsive Navigation

<nav class="bg-white shadow">
  <div class="flex items-center justify-between h-16 px-4">
    <div class="text-xl font-bold">Logo</div>

    <!-- Desktop menu -->
    <div class="hidden md:flex items-center gap-6">
      <a href="#">Home</a>
      <a href="#">About</a>
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
        Sign Up
      </button>
    </div>

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

Responsive Hero Section

<section class="py-12 md:py-24 px-4">
  <div class="flex flex-col md:flex-row items-center gap-8">
    <div class="flex-1 text-center md:text-left">
      <h1 class="text-3xl md:text-5xl font-bold">
        Build Better Products
      </h1>
      <p class="mt-4 text-lg text-gray-600">
        Create stunning websites with Tailwind CSS.
      </p>
    </div>
    <div class="flex-1">
      <img src="..." class="rounded-xl shadow-lg">
    </div>
  </div>
</section>

Responsive Card Grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow-md p-6">Card 1</div>
  <div class="bg-white rounded-xl shadow-md p-6">Card 2</div>
  <div class="bg-white rounded-xl shadow-md p-6">Card 3</div>
</div>

Key Takeaways

• Mobile-first: Base styles apply to all, breakpoints add larger screen styles
• Breakpoints: sm (640), md (768), lg (1024), xl (1280), 2xl (1536)
• Prefix any utility: md:text-lg, lg:flex-row, xl:grid-cols-4
• Show/Hide: hidden md:block or md:hidden
• Stack pattern: flex-col md:flex-row is very common

Next, let's add interactivity with states!