Responsive UI with Next.js 14 App Router × Tailwind CSS

Introduction: Why Next.js 14 × Tailwind CSS is Ideal for Modern Web Development

Next.js 14’s App Router enhances flexibility with React Server Components and layout capabilities, allowing for page-specific UI designs. Tailwind CSS excels at intuitive utility-based styling and responsive adaptation. In this guide, we’ll combine both to implement a responsive UI that works seamlessly across mobile and desktop.

1. Initial Project Setup

npx create-next-app@latest my-app --experimental-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

In tailwind.config.js, include the App Router’s app/ folder in the content scan target:

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

Load Tailwind’s base styles in globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Example Directory Structure

my-app/
├── app/
│   ├── layout.tsx       // Shared layout
│   ├── page.tsx         // Homepage
│   └── dashboard/
│       ├── page.tsx
│       └── settings/page.tsx
├── components/
│   ├── Header.tsx
│   └── Footer.tsx
├── styles/
│   └── globals.css
├── tailwind.config.js
└── package.json

Place <Header /> and <Footer /> inside layout.tsx to apply them across all pages.

3. Basic Patterns for Responsive Design

3-1. Adjusting Container Width

<div className="max-w-screen-lg mx-auto px-4">
  {/* Adjusts max width and horizontal padding based on screen size */}
</div>

3-2. Grid Layout

<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  {items.map(item => (
    <Card key={item.id} item={item} />
  ))}
</div>

• Switches to 2 columns on md:, and 3 columns on lg: and up.

3-3. Flex Layout with Wrapping

<nav className="flex flex-wrap justify-center space-x-4">
  <a className="text-blue-600 hover:underline" href="/">Home</a>
  {/* ... */}
</nav>

• Wraps on small screens; uses space-x-4 for consistent spacing.

4. Layout Switching with App Router

Next.js 14 allows per-folder nested <Layout>. To show a sidebar only under /dashboard:

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="flex min-h-screen">
      <Sidebar className="w-64 hidden lg:block" />
      <main className="flex-1 p-6">{children}</main>
    </div>
  )
}

• hidden lg:block hides the sidebar on mobile and shows it on desktop.

5. Responsive Control of Images and Media

Using Next.js’s next/image makes optimization and responsiveness simple:

import Image from "next/image"

<Image
  src="/hero.jpg"
  alt="Hero background"
  width={1200}
  height={600}
  className="w-full h-auto"
/>

• className="w-full h-auto" lets the image scale to the container width.

6. Accessibility Review

• Keyboard Navigation: Use focus:outline-none focus:ring-2 to visually highlight focus.
• Contrast: Ensure color ratios meet WCAG AA standards.
• ARIA Attributes: For responsive menus and modals, use appropriate role="dialog" or aria-expanded for screen reader support.

7. Target Audience and Benefits

• Frontend Engineers: For quick learning of responsive UI using Next.js 14 and Tailwind
• UI/UX Designers: Understand implementation and improve design collaboration
• Small Teams & Startups: Quickly prototype and validate UX with minimal resources

By applying this guide, you can ensure consistent UI across devices and reduce development time significantly.

Summary

1. Use Next.js 14 App Router to nest layouts by folder
2. Apply Tailwind CSS utilities for intuitive responsive classes
3. Convert common patterns like images, navigation, grids into reusable components
4. Prioritize accessibility to build inclusive UI for all users

Master the combination of Next.js and Tailwind to build beautiful, mobile-first, and highly usable responsive websites!