← Back to blog

Responsive React Sections with Tailwind CSS v4

Published on March 20, 2026·5 min read

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.

Related on incubator

VA

Victor Aubague

Developer & creator of Incubator

Full-stack developer specialized in React, Next.js, and TypeScript. I built Incubator to help developers ship beautiful interfaces faster, all components are crafted from real client projects and production code.

LinkedIn
← Back to blog
Responsive React Sections with Tailwind CSS v4