Tailwind CSS Responsive Design

# Tailwind CSS Responsive Design for Google Antigravity

Master responsive design patterns with Tailwind CSS in your Google Antigravity projects. This guide covers mobile-first design, breakpoint strategies, and adaptive component patterns.

## Responsive Breakpoint System

Configure and use breakpoints effectively:

```typescript
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    screens: {
      // Mobile first breakpoints
      xs: "475px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      
      // Max-width breakpoints (for mobile-first overrides)
      "max-xs": { max: "474px" },
      "max-sm": { max: "639px" },
      "max-md": { max: "767px" },
      "max-lg": { max: "1023px" },
      
      // Range breakpoints
      "sm-md": { min: "640px", max: "767px" },
      "md-lg": { min: "768px", max: "1023px" },
      
      // Device-specific
      tablet: { min: "768px", max: "1024px" },
      laptop: { min: "1024px", max: "1280px" },
      desktop: { min: "1280px" },
    },
    extend: {
      // Responsive spacing scale
      spacing: {
        "screen-sm": "640px",
        "screen-md": "768px",
        "screen-lg": "1024px",
        "screen-xl": "1280px",
      },
    },
  },
  plugins: [],
};

export default config;
```

## Responsive Layout Components

Build adaptive layouts:

```tsx
// src/components/Layout/ResponsiveGrid.tsx
interface ResponsiveGridProps {
  children: React.ReactNode;
  cols?: {
    default?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  gap?: string;
}

export function ResponsiveGrid({
  children,
  cols = { default: 1, sm: 2, md: 3, lg: 4 },
  gap = "gap-4 md:gap-6",
}: ResponsiveGridProps) {
  const gridCols = {
    1: "grid-cols-1",
    2: "grid-cols-2",
    3: "grid-cols-3",
    4: "grid-cols-4",
    5: "grid-cols-5",
    6: "grid-cols-6",
  };
  
  return (
    <div
      className={`
        grid ${gap}
        ${gridCols[cols.default || 1]}
        ${cols.sm ? `sm:${gridCols[cols.sm]}` : ""}
        ${cols.md ? `md:${gridCols[cols.md]}` : ""}
        ${cols.lg ? `lg:${gridCols[cols.lg]}` : ""}
        ${cols.xl ? `xl:${gridCols[cols.xl]}` : ""}
      `}
    >
      {children}
    </div>
  );
}

// src/components/Layout/Container.tsx
interface ContainerProps {
  children: React.ReactNode;
  size?: "sm" | "md" | "lg" | "xl" | "full";
  className?: string;
}

export function Container({
  children,
  size = "lg",
  className = "",
}: ContainerProps) {
  const sizes = {
    sm: "max-w-2xl",
    md: "max-w-4xl",
    lg: "max-w-6xl",
    xl: "max-w-7xl",
    full: "max-w-full",
  };
  
  return (
    <div
      className={`
        mx-auto w-full px-4 sm:px-6 lg:px-8
        ${sizes[size]}
        ${className}
      `}
    >
      {children}
    </div>
  );
}
```

## Responsive Navigation

Create adaptive navigation:

```tsx
// src/components/Navigation/ResponsiveNav.tsx
"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

const navItems = [
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "About", href: "/about" },
  { label: "Contact", href: "/contact" },
];

export function ResponsiveNav() {
  const [isOpen, setIsOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };
    
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  
  // Close mobile menu on resize
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) {
        setIsOpen(false);
      }
    };
    
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  
  return (
    <header
      className={`
        fixed top-0 left-0 right-0 z-50
        transition-all duration-300
        ${isScrolled
          ? "bg-black/90 backdrop-blur-md shadow-lg"
          : "bg-transparent"
        }
      `}
    >
      <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between md:h-20">
          {/* Logo */}
          <Link
            href="/"
            className="text-xl font-bold text-white md:text-2xl"
          >
            Logo
          </Link>
          
          {/* Desktop Navigation */}
          <div className="hidden md:flex md:items-center md:gap-8">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="
                  text-gray-300 hover:text-white
                  transition-colors duration-200
                  text-sm lg:text-base
                "
              >
                {item.label}
              </Link>
            ))}
            
            <button
              className="
                ml-4 rounded-lg bg-indigo-500 px-4 py-2
                text-sm font-medium text-white
                hover:bg-indigo-600 transition-colors
                lg:px-6 lg:py-2.5
              "
            >
              Get Started
            </button>
          </div>
          
          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="
              md:hidden p-2 rounded-lg
              text-gray-400 hover:text-white hover:bg-gray-800
              transition-colors
            "
            aria-label="Toggle menu"
          >
            <svg
              className="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              {isOpen ? (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              ) : (
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              )}
            </svg>
          </button>
        </div>
        
        {/* Mobile Navigation */}
        <div
          className={`
            md:hidden overflow-hidden transition-all duration-300 ease-in-out
            ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}
          `}
        >
          <div className="space-y-1 pb-4 pt-2">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="
                  block rounded-lg px-4 py-3
                  text-base text-gray-300
                  hover:bg-gray-800 hover:text-white
                  transition-colors
                "
                onClick={() => setIsOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            
            <button
              className="
                mt-4 w-full rounded-lg bg-indigo-500 px-4 py-3
                text-base font-medium text-white
                hover:bg-indigo-600 transition-colors
              "
            >
              Get Started
            </button>
          </div>
        </div>
      </nav>
    </header>
  );
}
```

## Responsive Card Components

Create adaptive cards:

```tsx
// src/components/Cards/ProductCard.tsx
interface ProductCardProps {
  title: string;
  description: string;
  image: string;
  price: number;
  category: string;
}

export function ProductCard({
  title,
  description,
  image,
  price,
  category,
}: ProductCardProps) {
  return (
    <div
      className="
        group relative overflow-hidden rounded-xl
        bg-gray-900 border border-gray-800
        transition-all duration-300
        hover:border-indigo-500/50 hover:shadow-lg hover:shadow-indigo-500/10
        
        /* Responsive padding */
        p-3 sm:p-4 lg:p-5
      "
    >
      {/* Image container - responsive aspect ratio */}
      <div
        className="
          relative overflow-hidden rounded-lg
          aspect-square sm:aspect-[4/3] lg:aspect-video
          mb-3 sm:mb-4
        "
      >
        <img
          src={image}
          alt={title}
          className="
            h-full w-full object-cover
            transition-transform duration-500
            group-hover:scale-110
          "
        />
        
        {/* Category badge - responsive positioning */}
        <span
          className="
            absolute top-2 left-2 sm:top-3 sm:left-3
            rounded-full bg-indigo-500/90 backdrop-blur-sm
            px-2 py-0.5 sm:px-3 sm:py-1
            text-xs sm:text-sm font-medium text-white
          "
        >
          {category}
        </span>
      </div>
      
      {/* Content - responsive typography */}
      <div className="space-y-2 sm:space-y-3">
        <h3
          className="
            font-semibold text-white line-clamp-1
            text-sm sm:text-base lg:text-lg
          "
        >
          {title}
        </h3>
        
        <p
          className="
            text-gray-400 line-clamp-2
            text-xs sm:text-sm
            leading-relaxed
          "
        >
          {description}
        </p>
        
        {/* Price and action - responsive layout */}
        <div
          className="
            flex items-center justify-between
            pt-2 sm:pt-3
            border-t border-gray-800
          "
        >
          <span
            className="
              font-bold text-white
              text-base sm:text-lg lg:text-xl
            "
          >
            ${price}
          </span>
          
          <button
            className="
              rounded-lg bg-indigo-500 text-white font-medium
              transition-colors hover:bg-indigo-600
              
              /* Responsive button size */
              px-3 py-1.5 text-xs
              sm:px-4 sm:py-2 sm:text-sm
            "
          >
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  );
}
```

## Responsive Typography

Implement fluid typography:

```css
/* src/styles/typography.css */
@layer base {
  html {
    /* Fluid font size: 16px at 320px, 18px at 1280px */
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  }
  
  h1 {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight;
  }
  
  h2 {
    @apply text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight;
  }
  
  h3 {
    @apply text-xl sm:text-2xl md:text-3xl font-semibold;
  }
  
  p {
    @apply text-sm sm:text-base leading-relaxed;
  }
}
```

Google Antigravity generates responsive Tailwind CSS implementations with mobile-first design patterns, adaptive components, and fluid typography for all screen sizes.