Faça o componente responder à tela e ao próprio container

Responsividade no Tailwind é uma variação da mesma utility. A classe sem prefixo define o estado base; md:* passa a valer a partir de 48rem. Essa ordem reduz sobrescritas e obriga você a resolver o conteúdo no espaço mais restrito antes de acrescentar colunas.

Comece pela seção de produto em coluna:

<section class="flex flex-col gap-6 p-4 md:flex-row md:p-8">
  <div class="min-w-0 flex-1">Conteúdo</div>
  <aside class="md:w-80">Preço</aside>
</section>

No mobile, não existe prefixo sm: para “tela pequena”. O estado sem prefixo é o mobile. md:flex-row acrescenta a direção horizontal quando existe largura. O breakpoint descreve condição mínima, não modelo de aparelho.

Pense em vestir camadas. O estado base é a roupa que sempre existe; cada breakpoint acrescenta ou troca uma peça quando a condição permite. A analogia falha se você imaginar que a camada antiga desaparece por completo: propriedades não sobrescritas continuam na cascata.

<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  ...
</section>

Escolha pontos pelo conteúdo. Arraste lentamente a largura e observe quando título, preço e botão deixam de caber. Um breakpoint em 48rem é padrão útil, mas não desculpa uma faixa quebrada em 43rem.

Variantes de máximo servem para intervalo ou manutenção de legado:

<aside class="hidden md:max-lg:block">Resumo compacto</aside>

Leia como frase: a partir de md e antes de lg, mostre o resumo. Evite empilhar dois mínimos como md:lg:*; o maior já contém o menor e a intenção fica opaca.

Viewport não resolve todo componente. O mesmo cartão pode aparecer no conteúdo principal e numa sidebar. Marque o pai com @container e use @md:* para responder ao espaço recebido:

<aside class="@container">
  <article class="flex flex-col @md:grid @md:grid-cols-2">...</article>
</aside>

No laboratório, a regra CSS equivalente está escrita diretamente porque o player não executa o compilador. Redimensionar a prateleira demonstra o mesmo mecanismo que Tailwind gera: container-type no ancestral e @container ao redor da regra. Essa transparência importa para você saber depurar fora da sintaxe utilitária.

Não use order-* para fazer o preço aparecer primeiro visualmente se o DOM lê outra sequência. Leitor de tela e navegação seguem a ordem estrutural. Se a ordem precisa mudar por significado, reavalie o HTML ou duplique apenas quando há justificativa semântica e manutenção segura.

Teste em 320px, 768px e 1440px, mas não pare nesses pontos. Aumente zoom, use um nome de plano longo e simule preço com muitas casas. O sucesso não é “o card mudou em md”; é nenhum conteúdo ficar inacessível no caminho.

Você encerra a aula quando consegue explicar por que a página usa breakpoint e o cartão usa container query. Essa escolha será mantida no projeto final, onde o mesmo bloco precisa funcionar na grade principal e na seção de comparação.

Registre também a largura em que o conteúdo pediu mudança. Esse número, acompanhado do motivo, vale mais que chamar o breakpoint de tablet.