Responsive Design mit Tailwind CSS: Best Practices

// Mobile: Stack vertikal
// Tablet: 2 Spalten
// Desktop: 3 Spalten
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card />
  <Card />
  <Card />
</div>

// Default Tailwind Breakpoints
sm: '640px',   // Phones (landscape), Tablets (portrait)
md: '768px',   // Tablets (landscape), Small laptops
lg: '1024px',  // Laptops, Desktops
xl: '1280px',  // Large desktops
'2xl': '1536px' // Extra large desktops

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {/* Auto-responsive grid */}
</div>
 
// Auto-fit Pattern
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
  {/* Automatische Spalten basierend auf Breite */}
</div>

<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>
 
<p className="text-sm md:text-base lg:text-lg leading-relaxed">
  Responsive paragraph text
</p>

<div className="p-4 md:p-6 lg:p-8">
  {/* Responsive padding */}
</div>
 
<div className="space-y-4 md:space-y-6 lg:space-y-8">
  {/* Responsive vertical spacing */}
</div>

{/* Nur Mobile */}
<div className="block md:hidden">
  Mobile Menu
</div>
 
{/* Ab Tablet */}
<div className="hidden md:block">
  Desktop Navigation
</div>
 
{/* Nur Desktop */}
<div className="hidden lg:block">
  Sidebar
</div>

pnpm add @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

<div className="@container">
  {/* Responsive basierend auf Container, nicht Viewport */}
  <div className="@sm:grid @sm:grid-cols-2 @lg:grid-cols-3">
    <Card />
  </div>
</div>

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
      // Custom Breakpoints
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

<div className="grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-4">
  {/* Custom breakpoints */}
</div>

export function DashboardLayout({ sidebar, children }) {
  return (
    <div className="flex flex-col lg:flex-row">
      {/* Mobile: Full width, stacked */}
      {/* Desktop: Fixed sidebar */}
      <aside className="lg:w-64 lg:flex-shrink-0">
        {sidebar}
      </aside>
 
      <main className="flex-1 p-4 lg:p-8">
        {children}
      </main>
    </div>
  )
}

export function Header() {
  const [menuOpen, setMenuOpen] = useState(false)
 
  return (
    <header className="sticky top-0 bg-white shadow">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <Logo />
 
          {/* Desktop Navigation */}
          <nav className="hidden md:flex space-x-8">
            <Link href="/">Home</Link>
            <Link href="/about">About</Link>
          </nav>
 
          {/* Mobile Menu Button */}
          <button
            className="md:hidden"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <Menu />
          </button>
        </div>
 
        {/* Mobile Menu */}
        {menuOpen && (
          <nav className="md:hidden pb-4">
            <Link href="/" className="block py-2">Home</Link>
            <Link href="/about" className="block py-2">About</Link>
          </nav>
        )}
      </div>
    </header>
  )
}

export function ProductGrid({ products }) {
  return (
    <div className="grid gap-6
      grid-cols-1
      sm:grid-cols-2
      lg:grid-cols-3
      xl:grid-cols-4
    ">
      {products.map(product => (
        <Card key={product.id}>
          <Image
            src={product.image}
            className="w-full h-48 sm:h-56 lg:h-64 object-cover"
          />
          <div className="p-4">
            <h3 className="text-lg sm:text-xl font-semibold">
              {product.name}
            </h3>
            <p className="text-sm sm:text-base text-gray-600">
              {product.price}
            </p>
          </div>
        </Card>
      ))}
    </div>
  )
}

<div className="relative w-full
  h-48 sm:h-64 md:h-80 lg:h-96
">
  <Image
    src="/hero.jpg"
    fill
    className="object-cover"
    sizes="(max-width: 640px) 100vw,
           (max-width: 1024px) 50vw,
           33vw"
  />
</div>

<div className="flex flex-col md:flex-row gap-4">
  <div className="flex-1">Content</div>
  <aside className="md:w-64">Sidebar</aside>
</div>

<div className="relative">
  <button className="
    absolute
    top-4 right-4
    md:top-8 md:right-8
  ">
    Close
  </button>
</div>

{/* 16:9 auf mobile, 4:3 auf desktop */}
<div className="aspect-video md:aspect-[4/3]">
  <Image src="/video.jpg" fill />
</div>

<div className="
  bg-white dark:bg-gray-900
  text-gray-900 dark:text-white
  p-4 md:p-8
">
  Content adapts to theme AND screen size
</div>

'use client'
 
import { useMediaQuery } from '@/hooks/useMediaQuery'
 
export function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)')
 
  return isMobile ? (
    <MobileVersion />
  ) : (
    <DesktopVersion />
  )
}

import dynamic from 'next/dynamic'
 
const HeavyDesktopComponent = dynamic(
  () => import('./HeavyDesktopComponent'),
  { ssr: false }
)
 
export function Page() {
  return (
    <div>
      {/* Mobile sieht das gar nicht */}
      <div className="hidden lg:block">
        <HeavyDesktopComponent />
      </div>
    </div>
  )
}

# Chrome DevTools
# Cmd+Shift+M (Mac) / Ctrl+Shift+M (Windows)
 
# Common Viewports
iPhone 14 Pro: 393 × 852
iPad Pro: 1024 × 1366
MacBook Air: 1280 × 832
Desktop: 1920 × 1080

// ✅ Gut: Base styles für mobile, dann erweitern
<div className="p-4 md:p-6 lg:p-8">
 
// ❌ Vermeiden: Desktop-first denken
<div className="p-8 md:p-6 sm:p-4">

// ✅ Gut: Gleiche Breakpoints überall
<div className="text-sm md:text-base lg:text-lg">
<div className="p-4 md:p-6 lg:p-8">
 
// ❌ Inkonsistent
<div className="text-sm lg:text-lg">
<div className="p-4 md:p-6 xl:p-8">

// ✅ Gut: space-y für vertikale Spacing
<div className="space-y-4 md:space-y-6">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
 
// ❌ Mehr Code
<div>
  <div className="mb-4 md:mb-6">Item 1</div>
  <div>Item 2</div>
</div>