Diseño responsive

// Breakpoints mobile-first (min-width)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 
// Breakpoints por defecto: sm(40rem) md(48rem) lg(64rem) xl(80rem) 2xl(96rem)
 
// Variante max-width
<div className="max-lg:hidden">  {/* oculto por debajo de lg */}
 
// Rango
<div className="md:max-xl:flex">  {/* flex solo entre md y xl */}
 
// Container queries
<div className="@container">
  <div className="@sm:flex @lg:grid @lg:grid-cols-2">
    {/* responde al ancho del contenedor, no al viewport */}
  </div>
</div>
 
// Contenedores con nombre
<div className="@container/sidebar">
  <div className="@md/sidebar:block">

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col lg:flex-row">
      {/* Barra lateral - ancho completo en móvil, ancho fijo en escritorio */}
      <aside className="border-b bg-gray-50 p-4 lg:w-64 lg:shrink-0 lg:border-b-0 lg:border-r">
        <nav className="flex gap-2 overflow-x-auto lg:flex-col lg:gap-1 lg:overflow-visible">
          <a href="#" className="whitespace-nowrap rounded px-3 py-2 text-sm hover:bg-gray-200 lg:whitespace-normal">
            Panel
          </a>
          <a href="#" className="whitespace-nowrap rounded px-3 py-2 text-sm hover:bg-gray-200 lg:whitespace-normal">
            Analíticas
          </a>
          <a href="#" className="whitespace-nowrap rounded px-3 py-2 text-sm hover:bg-gray-200 lg:whitespace-normal">
            Configuración
          </a>
        </nav>
      </aside>
 
      {/* Contenido principal */}
      <main className="flex-1 p-4 md:p-6 lg:p-8">
        {/* Cuadrícula de estadísticas - columnas responsive */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard label="Ingresos" value="$12,345" />
          <StatCard label="Usuarios" value="1,234" />
          <StatCard label="Pedidos" value="567" />
          <StatCard label="Conversión" value="3.2%" />
        </div>
 
        {/* Área de contenido con container queries */}
        <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_300px]">
          <section className="@container">
            <div className="@md:grid @md:grid-cols-2 @md:gap-4 space-y-4 @md:space-y-0">
              {children}
            </div>
          </section>
 
          <aside className="max-lg:hidden">
            <div className="sticky top-4 rounded border p-4">
              <h3 className="font-medium">Feed de actividad</h3>
            </div>
          </aside>
        </div>
      </main>
    </div>
  );
}
 
function StatCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-lg border bg-white p-4 shadow-sm">
      <p className="text-sm text-gray-500">{label}</p>
      <p className="mt-1 text-2xl font-bold">{value}</p>
    </div>
  );
}

@theme {
  --breakpoint-xs: 30rem;      /* 480px */
  --breakpoint-3xl: 120rem;    /* 1920px */
}

@theme {
  --container-4xs: 8rem;
}

<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Encabezado responsive
</h1>
 
{/* O usa clamp para un tamaño fluido */}
<h1 className="text-[clamp(1.5rem,4vw,3rem)]">
  Encabezado fluido
</h1>

{/* Mostrar solo en móvil */}
<div className="md:hidden">Nav móvil</div>
 
{/* Mostrar solo en escritorio */}
<div className="hidden md:block">Nav de escritorio</div>
 
{/* Mostrar entre md y xl */}
<div className="hidden md:block xl:hidden">Solo tablet</div>

function AdaptiveCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="@container">
      <div className="flex flex-col @sm:flex-row @sm:items-center gap-4 rounded border p-4">
        <div className="size-16 shrink-0 rounded bg-gray-200 @sm:size-20" />
        <div className="flex-1">{children}</div>
      </div>
    </div>
  );
}

// Las variantes responsive son nombres de clase - sin impacto en TS
// Pero puedes tipar props dependientes de breakpoints:
interface LayoutProps {
  columns?: {
    default: number;
    sm?: number;
    md?: number;
    lg?: number;
  };
}
 
function Grid({ columns }: LayoutProps) {
  const colClasses = {
    1: "grid-cols-1",
    2: "grid-cols-2",
    3: "grid-cols-3",
    4: "grid-cols-4",
  } as const;
 
  return (
    <div className={cn(
      "grid gap-4",
      colClasses[columns.default as keyof typeof colClasses],
      columns.sm && `sm:${colClasses[columns.sm as keyof typeof colClasses]}`,
    )}>
      {/* Nota: la construcción dinámica de clases no funciona con Tailwind - ver Errores comunes */}
    </div>
  );
}