Responsive React Sections with Tailwind CSS v4

A landing page that looks great on desktop but falls apart on mobile is a landing page that loses half its traffic. Mobile accounts for over 60% of web traffic globally, and Google uses mobile-first indexing. Responsive design is not optional — it is the baseline. This guide covers how to build fully responsive React sections using Tailwind CSS v4.

Mobile-First Approach

Tailwind's responsive utilities are mobile-first by design. Unprefixed utilities apply to all screen sizes, and breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) apply at that breakpoint and above:

<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  {/* 1 column on mobile, 2 on tablet, 3 on desktop */}
</div>

This is not just a convention — it is a mental model. Start by designing for the smallest screen, then add complexity for larger screens. Benefits:

• Forces content prioritization. On a 375px screen, you cannot show everything. You must decide what matters most.
• Less CSS. Adding styles for larger screens is additive. The alternative — designing desktop-first and overriding for mobile — requires more overrides and max-width media queries.
• Matches user reality. Most first-time visitors hit your landing page on a phone.

Tailwind v4 Responsive Features

Tailwind v4 introduces several improvements relevant to responsive design:

CSS-First Configuration

No more tailwind.config.ts for basic customization. Define custom breakpoints directly in CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;   /* 480px */
  --breakpoint-sm: 40rem;   /* 640px */
  --breakpoint-md: 48rem;   /* 768px */
  --breakpoint-lg: 64rem;   /* 1024px */
  --breakpoint-xl: 80rem;   /* 1280px */
  --breakpoint-2xl: 96rem;  /* 1536px */
}

Container Queries

Tailwind v4 adds native support for container queries — responsive styles based on a parent container's width, not the viewport. This is a game-changer for reusable components:

export function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <div className="@container">
      <div className="flex flex-col gap-4 @md:flex-row @md:items-center">
        <div className="h-12 w-12 shrink-0 rounded-lg bg-primary" />
        <div>
          <h3 className="text-lg font-semibold">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
    </div>
  );
}

The @container class establishes a containment context. The @md: prefix applies styles when the container (not the viewport) is at least the md width. This means the same FeatureCard component adapts whether it is in a 2-column grid, a 3-column grid, or a sidebar — without any prop changes.

Responsive Grid Patterns

The Auto-Fit Grid

The most flexible grid pattern uses CSS auto-fit with minmax to create columns that automatically adjust:

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {items.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</div>

This creates as many 280px-minimum columns as fit in the container. No breakpoints needed — the grid is inherently responsive.

The Stacked-to-Split Pattern

For hero sections and content blocks that stack vertically on mobile and split horizontally on desktop:

export function HeroSplit() {
  return (
    <section className="flex min-h-[80vh] flex-col items-center lg:flex-row">
      <div className="flex flex-1 flex-col justify-center px-6 py-16 lg:px-16">
        <h1 className="text-4xl font-bold lg:text-6xl">
          Your headline here
        </h1>
        <p className="mt-4 text-lg text-muted-foreground">
          Supporting text that explains the value proposition.
        </p>
      </div>
      <div className="flex-1">
        <img
          src="/hero-image.png"
          alt="Product screenshot"
          className="h-full w-full object-cover"
        />
      </div>
    </section>
  );
}

On mobile: content stacks vertically, headline first, image below. On lg screens: side-by-side split layout.

Adaptive Typography

Text that looks right on desktop often looks too large or too small on mobile. Use Tailwind's responsive prefixes for type scale:

<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive headline
</h1>
<p className="text-base text-muted-foreground md:text-lg">
  Body text that scales with the viewport.
</p>

For fluid typography that scales smoothly between breakpoints instead of jumping, use clamp():

.fluid-heading {
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3.75rem);
}

This gives you 30px at 320px viewport width and 60px at 1440px, scaling linearly between them. Combine with Tailwind by defining a custom utility or applying it directly via an inline style.

Responsive Section Spacing

Sections need different padding at different screen sizes. A section that looks airy on desktop (py-24) feels claustrophobic on mobile. Define consistent responsive padding:

<section className="px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24">
  {/* section content */}
</section>

Or create a reusable section wrapper:

interface SectionProps {
  id?: string;
  className?: string;
  children: React.ReactNode;
}

export function Section({ id, className, children }: SectionProps) {
  return (
    <section
      id={id}
      className={`px-4 py-16 md:px-8 md:py-20 lg:px-16 lg:py-24 ${className ?? ""}`}
    >
      <div className="mx-auto max-w-6xl">{children}</div>
    </section>
  );
}

This constrains content width on large screens while giving full-bleed sections their background.

Testing Responsive Layouts

Chrome DevTools' device toolbar is the minimum. But also test on actual devices — touch targets, font rendering, and scroll behavior differ between simulators and real phones.

Key checkpoints:

• 320px width (iPhone SE) — the minimum viable width. If your layout breaks here, fix it.
• 375px width (iPhone 14) — the most common mobile viewport.
• 768px width (iPad portrait) — tablet breakpoint. Two-column layouts should work here.
• 1024px width (iPad landscape / small laptop) — full desktop layout should kick in.
• Touch targets — minimum 44x44px for buttons and links. Tailwind's p-3 on a button usually achieves this.

Responsive Sections, Ready to Copy

Building responsive sections from scratch for every project is repetitive. The Incubator catalog has 844+ section variants — every one built mobile-first with Tailwind CSS v4. From hero layouts that stack gracefully on phones to feature grids that adapt from single-column to multi-column, each section is tested across all standard breakpoints. Browse the catalog, copy the sections you need, and ship a responsive landing page without writing responsive CSS from scratch.