Design Responsivo

// Breakpoints mobile-first (min-width)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 
// Breakpoints padrão: sm(40rem) md(48rem) lg(64rem) xl(80rem) 2xl(96rem)
 
// Variante de largura máxima
<div className="max-lg:hidden">  {/* oculto abaixo de lg */}
 
// Intervalo
<div className="md:max-xl:flex">  {/* flex apenas entre md e xl */}
 
// Container queries
<div className="@container">
  <div className="@sm:flex @lg:grid @lg:grid-cols-2">
    {/* responde à largura do container, não à viewport */}
  </div>
</div>
 
// Containers nomeados
<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">
      {/* Sidebar - largura total no mobile, largura fixa no desktop */}
      <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">
            Dashboard
          </a>
          <a href="#" className="whitespace-nowrap rounded px-3 py-2 text-sm hover:bg-gray-200 lg:whitespace-normal">
            Analytics
          </a>
          <a href="#" className="whitespace-nowrap rounded px-3 py-2 text-sm hover:bg-gray-200 lg:whitespace-normal">
            Settings
          </a>
        </nav>
      </aside>
 
      {/* Conteúdo principal */}
      <main className="flex-1 p-4 md:p-6 lg:p-8">
        {/* Grid de estatísticas - colunas responsivas */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard label="Receita" value="$12,345" />
          <StatCard label="Usuários" value="1,234" />
          <StatCard label="Pedidos" value="567" />
          <StatCard label="Conversão" value="3.2%" />
        </div>
 
        {/* Área de conteúdo com 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 Atividade</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">
  Título Responsivo
</h1>
 
{/* Ou use clamp para dimensionamento fluido */}
<h1 className="text-[clamp(1.5rem,4vw,3rem)]">
  Título Fluido
</h1>

{/* Mostrar apenas no mobile */}
<div className="md:hidden">Nav mobile</div>
 
{/* Mostrar apenas no desktop */}
<div className="hidden md:block">Nav desktop</div>
 
{/* Mostrar entre md e xl */}
<div className="hidden md:block xl:hidden">Apenas 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>
  );
}

// Variantes responsivas são nomes de classe - sem impacto no TS
// Mas você pode tipar props dependentes de breakpoint:
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: construção dinâmica de classes não funciona com Tailwind - veja Armadilhas */}
    </div>
  );
}