Tailwind Responsive Design Patterns

Complete guide to building responsive layouts with Tailwind CSS.
Mobile-first patterns with live demos and copyable code.

Navigation Responsive Grid Typography Spacing Hide/Show Images Cards Hero Sections Sidebars Tables

Tailwind Breakpoints

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screens, while prefixed utilities (sm:, md:, etc.) apply at that breakpoint and above.

Prefix	Min Width	CSS Media Query
(none)	0px	Default (mobile-first)
sm:	640px	@media (min-width: 640px)
md:	768px	@media (min-width: 768px)
lg:	1024px	@media (min-width: 1024px)
xl:	1280px	@media (min-width: 1280px)
2xl:	1536px	@media (min-width: 1536px)

Responsive Navigation

Hamburger menu on mobile, full navigation on desktop. Use hidden md:flex to show desktop nav and md:hidden for mobile toggle.

Live Preview

HTML

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

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-8">
        <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 -->
      <div class="md:hidden flex items-center">
        <button class="p-2" onclick="toggleMenu()">
          <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>
  </div>

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

Key Classes Explained

hidden md:flex - Hidden on mobile, flex on md+
md:hidden - Visible on mobile, hidden on md+
space-x-8 - Horizontal spacing between nav items

Responsive Grid

Use grid-cols with breakpoint prefixes to change column counts at different screen sizes.

Live Preview - Resize to see changes

Item 1

Item 2

Item 3

Item 4

HTML

<!-- 1 column on mobile, 2 on tablet, 4 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="bg-white p-6 rounded-lg shadow">Item 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 3</div>
  <div class="bg-white p-6 rounded-lg shadow">Item 4</div>
</div>

<!-- Auto-fit grid (as many columns as fit) -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- Items automatically wrap -->
</div>

<!-- 12-column grid with responsive spans -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-12 md:col-span-8">Main content</div>
  <div class="col-span-12 md:col-span-4">Sidebar</div>
</div>

Common Grid Patterns

grid-cols-1 md:grid-cols-2 lg:grid-cols-3 - Product grid
col-span-12 md:col-span-8 - Main content + sidebar
gap-4 lg:gap-8 - Responsive gaps

Responsive Typography

Scale font sizes and adjust text properties at different breakpoints for optimal readability.

Live Preview

Responsive Heading

Body text that scales with screen size. Notice how this text gets larger on bigger screens.

HTML

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

<p class="text-sm md:text-base lg:text-lg">
  Body text that scales with screen size
</p>

<!-- Responsive Line Height -->
<p class="leading-tight md:leading-normal lg:leading-relaxed">
  Text with responsive line height
</p>

<!-- Responsive Text Alignment -->
<div class="text-center md:text-left">
  Centered on mobile, left-aligned on desktop
</div>

Typography Scale Reference

text-sm - 14px

text-base - 16px

text-lg - 18px

text-xl - 20px

text-2xl - 24px

text-3xl - 30px

Responsive Spacing

Adjust padding, margin, and gap values at different breakpoints for optimal visual hierarchy.

Live Preview

This box has responsive padding (p-4 md:p-6 lg:p-8)

HTML

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

<!-- Responsive Margin -->
<div class="my-8 lg:my-16">
  More vertical margin on desktop
</div>

<!-- Responsive Gap -->
<div class="flex flex-col md:flex-row gap-4 md:gap-6 lg:gap-8">
  <!-- Items with responsive gaps -->
</div>

<!-- Section Spacing Pattern -->
<section class="py-12 md:py-20 lg:py-32 px-4 md:px-8">
  <!-- Full section with responsive padding -->
</section>

Spacing Scale Reference

p-4 - 16px

p-6 - 24px

p-8 - 32px

p-10 - 40px

p-12 - 48px

p-16 - 64px

Hide/Show Elements

Show different content at different breakpoints. Perfect for mobile-specific or desktop-specific elements.

Live Preview

This is only visible on md+ screens (desktop/tablet)

This is only visible on mobile (below md)

Full Label Text for Larger ScreensShort

HTML

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

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

<!-- Hidden on specific breakpoint -->
<div class="block sm:hidden md:block">
  Visible on mobile and desktop, hidden on tablet
</div>

<!-- Different display types -->
<div class="hidden lg:flex lg:items-center lg:gap-4">
  Flex container on large screens only
</div>

<!-- Responsive visibility with inline -->
<span class="hidden sm:inline">Full Label</span>
<span class="sm:hidden">Short</span>

Visibility Patterns

hidden md:block - Mobile hidden, desktop visible
md:hidden - Mobile visible, desktop hidden
hidden lg:flex - Flex only on large screens

Responsive Cards

Cards that stack vertically on mobile and arrange horizontally on desktop.

Live Preview

Card 1

Cards stack on mobile and sit side-by-side on larger screens.

Card 2

Using flex-col on mobile, flex-row on desktop.

Card 3

flex-1 ensures equal widths on desktop.

HTML

<!-- Cards: Stack on mobile, Grid on desktop -->
<div class="flex flex-col lg:flex-row gap-6">
  <div class="flex-1 bg-white p-6 rounded-xl shadow-md">
    <h3 class="font-bold mb-2">Card 1</h3>
    <p>Card content here</p>
  </div>
  <div class="flex-1 bg-white p-6 rounded-xl shadow-md">
    <h3 class="font-bold mb-2">Card 2</h3>
    <p>Card content here</p>
  </div>
  <div class="flex-1 bg-white p-6 rounded-xl shadow-md">
    <h3 class="font-bold mb-2">Card 3</h3>
    <p>Card content here</p>
  </div>
</div>

<!-- Alternative: Grid approach -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
  <!-- Cards here -->
</div>

Key Classes Explained

flex-col lg:flex-row - Column on mobile, row on desktop
flex-1 - Equal width for all cards

Responsive Hero Section

Hero sections with responsive typography, spacing, and button layouts.

Build Amazing Products

The best way to build modern web applications with Tailwind CSS

HTML

<!-- Responsive Hero Section -->
<section class="px-4 py-16 md:py-24 lg:py-32">
  <div class="max-w-6xl mx-auto text-center">
    <!-- Responsive heading -->
    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
      Build Amazing Products
    </h1>

    <!-- Responsive subtitle -->
    <p class="text-lg md:text-xl lg:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto">
      The best way to build modern web applications
    </p>

    <!-- Responsive buttons -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="px-8 py-3 bg-blue-600 text-white rounded-lg">
        Get Started
      </button>
      <button class="px-8 py-3 border border-gray-300 rounded-lg">
        Learn More
      </button>
    </div>
  </div>
</section>

Key Patterns

py-16 md:py-24 lg:py-32 - More vertical padding on larger screens
flex-col sm:flex-row - Stacked buttons on mobile, inline on tablet+

Mobile-First Best Practices

Do: Write mobile styles first

<!-- Good: Mobile-first approach -->
<div class="p-4 md:p-6 lg:p-8">
  <h1 class="text-xl md:text-2xl lg:text-3xl">Title</h1>
</div>

Avoid: Desktop-first approach

<!-- Avoid: Starting with large screens -->
<div class="p-8 sm:p-6 md:p-4">
  <!-- This is backwards! -->
</div>

Key Principles

1.Start with mobile layout (no prefix)
2.Add complexity at larger breakpoints
3.Use min-width breakpoints (sm, md, lg, xl)
4.Test on real devices, not just browser resize

Common Patterns

flex-col md:flex-row
grid-cols-1 md:grid-cols-2 lg:grid-cols-3
text-sm md:text-base lg:text-lg
hidden md:block
w-full md:w-1/2 lg:w-1/3

About Tailwind Responsive Design

Tailwind CSS uses a mobile-first approach where unprefixed utilities apply to all screen sizes, and prefixed utilities (sm:, md:, etc.) apply at that breakpoint and above.

This means you should design for mobile first, then add complexity at larger breakpoints. For example, grid-cols-1 md:grid-cols-2 lg:grid-cols-4 starts with 1 column and expands to 4.

All breakpoints are min-width based, making it easy to progressively enhance your layouts for larger screens.

Need to look up all the default breakpoint values? Tailwind Breakpoints Reference →

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect responsive utilities, breakpoint-specific styles, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →