Como Estruturar a Tag Main do Blog com Tailwind CSS

No primeiro artigo da nossa série, vimos como construir um cabeçalho fixo usando utilitários do Tailwind CSS como bg-header, border-subtle, backdrop-blur-md e uma altura bem definida de h-20 (80px).

Agora, precisamos estruturar o elemento <main>. Ele deve herdar exatamente a mesma paleta semântica de cores e ter uma compensação de altura precisa para evitar que o conteúdo da página fique oculto atrás da barra de navegação superior.

O Desafio da Compensação de Altura (pt-20 vs pt-28)

Quando trabalhamos com um header fixo através de fixed top-0 left-0 w-full z-50 e altura h-20 (80px), o elemento <main> perde sua referência no fluxo normal do documento e “sobe” para o topo da tela.

Se não aplicarmos o espaçamento adequado, o título principal da página fica escondido debaixo do menu. Para resolver isso, usamos a classe pt-28 (112px). Ela fornece os 80px necessários para cobrir a altura do header mais 32px de respiro visual para o conteúdo da página.

Estrutura Real da Tag Main no Projeto onde.html

Confira abaixo a implementação da tag <main> totalmente integrada ao padrão visual do projeto:

<!-- CONTEÚDO PRINCIPAL (MAIN) -->
<main class="pt-28 pb-16 min-h-screen bg-secondary text-primary transition-colors duration-300">
  
  <!-- Container alinhado com a largura do Header (max-w-7xl) -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Hero / Cabeçalho da Seção Principal -->
    <section class="py-8 border-b border-subtle">
      <span class="text-xs font-semibold uppercase tracking-wider text-brand">
        Front-End Architecture
      </span>
      <h1 class="font-title font-extrabold text-3xl sm:text-5xl tracking-tight text-accent mt-2">
        Acompanhe a Construção do Blog
      </h1>
      <p class="mt-4 text-base sm:text-lg text-primary/80 max-w-3xl leading-relaxed">
        Documentando cada etapa da interface: das variáveis do Tailwind à componentização dos artigos.
      </p>
    </section>

    <!-- Grid do Conteúdo (Área de Posts + Sidebar) -->
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-12 gap-8">
      
      <!-- Coluna Principal (Artigos) -->
      <section class="lg:col-span-8 space-y-8">
        <!-- Inserção dos Cards de Artigos -->
      </section>

      <!-- Coluna Lateral (Sidebar) -->
      <aside class="lg:col-span-4 space-y-6">
        <!-- Widgets de Busca e Categorias -->
      </aside>

    </div>

  </div>
</main>

Mapeamento das Classes e Compatibilidade com o Header

A tabela abaixo detalha a relação direta entre o estilo do <header> e as decisões tomadas na tag <main>:

Destaques de UI e Acessibilidade

💡 Dica de Ouro: Repetir as classes de container como max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 no <header>, no <main> e no <footer> garante que todos os blocos do site compartilhem rigorosamente a mesma linha guia vertical, eliminando quebras visuais ao rolar a página em monitores ultra-wide.

Conclusão

Alinhar a tag <main> com as especificações exatas do seu <header> evita problemas recorrentes de sobreposição e mantém o código semântico e organizado.

Com o grid de 12 colunas preparado no <main>, o próximo passo é popular a coluna de 8 colunas com os Cards de Artigos, utilizando as classes bg-secondary, border-subtle e os estados interativos do Tailwind CSS!

Você já teve problemas com elementos fixos cobrindo o conteúdo no CSS? Conte sua experiência nos comentários abaixo!