tailwind-responsive-design

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: