Responsive Design

Breakpoint Prefixes

Tailwind uses mobile-first breakpoints. Unprefixed utilities apply to all sizes. Prefix with sm:, md:, lg:, xl:, 2xl: to apply at that breakpoint and above. Default breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.

Build mobile layouts first, then add responsive prefixes to enhance for larger screens. This mirrors CSS mobile-first media query best practices.

• Breakpoints are min-width — md:flex applies at 768px and up
• Customize breakpoints in theme.extend.screens
• Use max-* variants for max-width queries: max-md:hidden

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- 1 col mobile, 2 tablet, 3 desktop, 4 wide -->
</div>

<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive heading
</h1>

Responsive Patterns

Common patterns: stack on mobile, row on desktop (flex-col md:flex-row). Hide/show elements per breakpoint (hidden md:block). Adjust padding and spacing (px-4 lg:px-8).

Responsive typography scales headings without media queries in custom CSS. Combine with max-w-prose for readable text widths at any viewport.

<header class="flex flex-col md:flex-row md:items-center
  md:justify-between gap-4 px-4 py-6 lg:px-8">
  <Logo class="h-8" />
  <nav class="hidden md:flex gap-6">Desktop nav</nav>
  <button class="md:hidden">Menu</button>
</header>

Container Utility

The container class sets max-width per breakpoint and centers content with auto margins. Configure container padding and max-widths in the config file.

Combine container with mx-auto px-4 for the classic centered page layout. Use @container (v4) or @tailwindcss/container-queries plugin for component-level responsiveness.

<div class="container mx-auto px-4 py-8">
  <div class="max-w-3xl mx-auto">
    Centered content column
  </div>
</div>

Container Queries

Tailwind v4 includes container query support natively. Mark an element as @container, then use @sm:, @md:, @lg: prefixes for styles based on container width, not viewport.

Container queries enable truly reusable components — a card grid item adapts to its column width regardless of page layout.

• @container on parent enables @-prefixed utilities on children
• Use @min-[400px]:flex-row for arbitrary container breakpoints
• Container queries complement viewport breakpoints, not replace them

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-32" src="..." />
    <div>Content adapts to container width</div>
  </div>
</div>

Responsive Images

Use w-full h-auto for fluid images. Object-cover with aspect-square or aspect-video for consistent thumbnails. Hidden and block variants swap image sources per breakpoint when needed.

Tailwind does not handle srcset — use HTML picture element alongside Tailwind sizing classes for art direction and resolution switching.

<img class="w-full h-48 object-cover rounded-lg"
  src="hero.jpg" alt="Hero" />

<div class="aspect-video bg-gray-200 rounded-xl overflow-hidden">
  <img class="w-full h-full object-cover" src="..." />
</div>