Tailwind CSS - Responsive Design

Tailwind CSS provides a mobile-first responsive design system using breakpoint prefixes that make it easy to build adaptive layouts.

Key Concepts

Mobile-First Approach

Tailwind uses a mobile-first breakpoint system. Unprefixed utilities apply to all screen sizes, and breakpoint prefixes apply from that breakpoint and up:

<!-- Mobile: full width, Tablet+: half width, Desktop+: third width -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Default Breakpoints

// tailwind.config.js default breakpoints
{
  sm: '640px',   // Small devices (landscape phones)
  md: '768px',   // Medium devices (tablets)
  lg: '1024px',  // Large devices (desktops)
  xl: '1280px',  // Extra large devices (large desktops)
  '2xl': '1536px' // 2X large devices (larger desktops)
}

Best Practices

1. Start Mobile, Scale Up

Design for mobile first, then add complexity for larger screens:

<!-- Good: Mobile-first approach -->
<div class="
  flex flex-col
  md:flex-row
  gap-4
">
  <div class="w-full md:w-1/2">Column 1</div>
  <div class="w-full md:w-1/2">Column 2</div>
</div>

<!-- Bad: Desktop-first (requires more overrides) -->
<div class="
  flex flex-row
  sm:flex-col
">

2. Use Responsive Typography

Scale text appropriately across devices:

<h1 class="
  text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl
  font-bold
  leading-tight
">
  Responsive Heading
</h1>

<p class="
  text-sm sm:text-base md:text-lg
  leading-relaxed
">
  Body text that scales
</p>

3. Responsive Spacing

Adjust padding and margins for different screens:

<div class="
  px-4 sm:px-6 md:px-8 lg:px-12
  py-8 md:py-12 lg:py-16
">
  <!-- Content with responsive padding -->
</div>

<section class="
  space-y-4 md:space-y-6 lg:space-y-8
">
  <!-- Responsive spacing between children -->
</section>

4. Grid Layouts

Create responsive grids that adapt to screen size:

<!-- 1 column mobile, 2 tablet, 3 desktop, 4 large desktop -->
<div class="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 md:gap-6
">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

5. Show/Hide Elements

Control visibility across breakpoints:

<!-- Mobile menu button: visible on mobile, hidden on desktop -->
<button class="md:hidden">
  <svg><!-- Menu icon --></svg>
</button>

<!-- Desktop navigation: hidden on mobile, visible on desktop -->
<nav class="hidden md:flex space-x-6">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!-- Show only on mobile -->
<div class="block md:hidden">Mobile only</div>

<!-- Show only on desktop -->
<div class="hidden lg:block">Desktop only</div>

Examples

Responsive Hero Section

<section class="
  relative
  min-h-screen md:min-h-[600px] lg:min-h-[800px]
  px-4 sm:px-6 lg:px-8
  py-12 md:py-16 lg:py-20
">
  <div class="
    max-w-7xl mx-auto
    flex flex-col md:flex-row
    items-center
    gap-8 md:gap-12
  ">
    <!-- Text Content -->
    <div class="
      w-full md:w-1/2
      text-center md:text-left
    ">
      <h1 class="
        text-3xl sm:text-4xl md:text-5xl lg:text-6xl
        font-bold
        mb-4 md:mb-6
      ">
        Welcome to Our Site
      </h1>
      <p class="
        text-base sm:text-lg md:text-xl
        text-gray-600
        mb-6 md:mb-8
      ">
        This is a responsive hero section that adapts to all screen sizes.
      </p>
      <button class="
        w-full sm:w-auto
        px-6 md:px-8
        py-3 md:py-4
        bg-blue-500 hover:bg-blue-600
        text-white
        text-base md:text-lg
        rounded-lg
      ">
        Get Started
      </button>
    </div>

    <!-- Image -->
    <div class="
      w-full md:w-1/2
      order-first md:order-last
    ">
      <img
        src="/hero.jpg"
        alt="Hero"
        class="
          w-full
          rounded-lg md:rounded-xl
          shadow-lg md:shadow-2xl
        "
      />
    </div>
  </div>
</section>

Responsive Card Grid

<div class="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 sm:gap-6 lg:gap-8
  px-4 sm:px-6 lg:px-8
">
  {cards.map(card => (
    <div class="
      bg-white
      rounded-lg md:rounded-xl
      shadow-md hover:shadow-xl
      overflow-hidden
      transition-shadow
    ">
      <img
        src={card.image}
        alt={card.title}
        class="
          w-full
          h-48 sm:h-56 lg:h-64
          object-cover
        "
      />
      <div class="
        p-4 sm:p-5 lg:p-6
      ">
        <h3 class="
          text-lg sm:text-xl
          font-semibold
          mb-2
        ">
          {card.title}
        </h3>
        <p class="
          text-sm sm:text-base
          text-gray-600
          line-clamp-3
        ">
          {card.description}
        </p>
      </div>
    </div>
  ))}
</div>

Responsive Navigation

<nav class="
  bg-white
  border-b border-gray-200
  sticky top-0 z-50
">
  <div class="
    max-w-7xl mx-auto
    px-4 sm:px-6 lg:px-8
  ">
    <div class="
      flex justify-between items-center
      h-16 md:h-20
    ">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <img
          src="/logo.svg"
          alt="Logo"
          class="h-8 md:h-10 w-auto"
        />
      </div>

      <!-- Desktop Navigation -->
      <div class="
        hidden md:flex
        space-x-8
      ">
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          Home
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          About
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          Services
        </a>
        <a href="#" class="
          text-gray-700 hover:text-blue-600
          px-3 py-2
          text-sm lg:text-base
          font-medium
        ">
          Contact
        </a>
      </div>

      <!-- Mobile Menu Button -->
      <button class="
        md:hidden
        p-2
        rounded-md
        text-gray-700 hover:bg-gray-100
      ">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div class="md:hidden border-t border-gray-200">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        Home
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        About
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        Services
      </a>
      <a href="#" class="
        block px-3 py-2
        rounded-md
        text-base font-medium
        text-gray-700 hover:bg-gray-100
      ">
        Contact
      </a>
    </div>
  </div>
</nav>

Advanced Patterns

Container Queries (Modern)

Use container queries for component-level responsiveness:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

<div class="@container">
  <div class="
    @sm:grid @sm:grid-cols-2
    @lg:grid-cols-3
    gap-4
  ">
    <!-- Responsive to container, not viewport -->
  </div>
</div>

Custom Breakpoints

Add project-specific breakpoints:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
      // Max-width breakpoints
      'max-md': { 'max': '767px' },
      // Height breakpoints
      'tall': { 'raw': '(min-height: 800px)' },
    },
  },
}

Orientation-Based Styles

<div class="
  portrait:flex-col
  landscape:flex-row
">
  Content that adapts to orientation
</div>

Print Styles

<div class="
  text-base
  print:text-xs
  print:hidden
">
  This is hidden in print
</div>

<div class="hidden print:block">
  This only appears in print
</div>

Common Patterns

Responsive Image Sizes

<img
  src="/image.jpg"
  alt="Responsive image"
  class="
    w-full
    h-auto
    max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
    mx-auto
  "
/>

<!-- With aspect ratio -->
<div class="
  aspect-square sm:aspect-video
  w-full
  overflow-hidden
">
  <img
    src="/image.jpg"
    class="w-full h-full object-cover"
  />
</div>

Responsive Flexbox Direction

<div class="
  flex
  flex-col sm:flex-row
  gap-4
  items-center sm:items-start
  justify-center sm:justify-between
">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Order

<div class="flex flex-col md:flex-row">
  <div class="order-2 md:order-1">First on desktop, second on mobile</div>
  <div class="order-1 md:order-2">Second on desktop, first on mobile</div>
</div>

Anti-Patterns

❌ Don't Use Too Many Breakpoints

<!-- Bad: Excessive breakpoints -->
<div class="
  text-xs
  sm:text-sm
  md:text-base
  lg:text-lg
  xl:text-xl
  2xl:text-2xl
">

<!-- Good: Strategic breakpoints -->
<div class="
  text-sm
  md:text-base
  lg:text-lg
">

❌ Don't Forget Mobile Users

<!-- Bad: Desktop-only thinking -->
<div class="grid grid-cols-4 gap-2">

<!-- Good: Mobile-first -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

❌ Don't Use Arbitrary Breakpoints Everywhere

<!-- Bad: Too many custom breakpoints -->
<div class="min-[823px]:flex min-[1043px]:grid">

<!-- Good: Use standard breakpoints -->
<div class="md:flex lg:grid">

Related Skills

• tailwind-utility-classes: Using Tailwind's utility classes effectively
• tailwind-components: Building reusable component patterns
• tailwind-performance: Optimizing responsive designs for performance