{"id":165,"date":"2026-09-10T18:17:20","date_gmt":"2026-09-10T21:17:20","guid":{"rendered":"https:\/\/aqgoes.com\/blog\/?p=165"},"modified":"2026-09-10T18:17:20","modified_gmt":"2026-09-10T21:17:20","slug":"estrutura-main-front-end-tailwind-css","status":"publish","type":"post","link":"https:\/\/aqgoes.com\/blog\/estrutura-main-front-end-tailwind-css\/","title":{"rendered":"Como Estruturar a Tag Main do Blog com Tailwind CSS"},"content":{"rendered":"\n
\n

No primeiro artigo da nossa s\u00e9rie, vimos como construir um cabe\u00e7alho fixo usando utilit\u00e1rios do Tailwind CSS como bg-header<\/code>, border-subtle<\/code>, backdrop-blur-md<\/code> e uma altura bem definida de h-20<\/code> (80px).<\/p>\n\n\n\n

Agora, precisamos estruturar o elemento <main><\/code>. Ele deve herdar exatamente a mesma paleta sem\u00e2ntica de cores e ter uma compensa\u00e7\u00e3o de altura precisa para evitar que o conte\u00fado da p\u00e1gina fique oculto atr\u00e1s da barra de navega\u00e7\u00e3o superior.<\/p>\n<\/blockquote>\n\n\n\n

O Desafio da Compensa\u00e7\u00e3o de Altura (pt-20<\/code> vs pt-28<\/code>)<\/h2>\n\n\n\n

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

Se n\u00e3o aplicarmos o espa\u00e7amento adequado, o t\u00edtulo principal da p\u00e1gina fica escondido debaixo do menu. Para resolver isso, usamos a classe pt-28<\/code> (112px). Ela fornece os 80px necess\u00e1rios para cobrir a altura do header mais 32px de respiro visual para o conte\u00fado da p\u00e1gina.<\/p>\n\n\n\n

Estrutura Real da Tag Main no Projeto onde.html<\/code><\/h2>\n\n\n\n

Confira abaixo a implementa\u00e7\u00e3o da tag <main><\/code> totalmente integrada ao padr\u00e3o visual do projeto:<\/p>\n\n\n\n

<!-- CONTE\u00daDO PRINCIPAL (MAIN) -->\n<main class=\"pt-28 pb-16 min-h-screen bg-secondary text-primary transition-colors duration-300\">\n  \n  <!-- Container alinhado com a largura do Header (max-w-7xl) -->\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n    \n    <!-- Hero \/ Cabe\u00e7alho da Se\u00e7\u00e3o Principal -->\n    <section class=\"py-8 border-b border-subtle\">\n      <span class=\"text-xs font-semibold uppercase tracking-wider text-brand\">\n        Front-End Architecture\n      <\/span>\n      <h1 class=\"font-title font-extrabold text-3xl sm:text-5xl tracking-tight text-accent mt-2\">\n        Acompanhe a Constru\u00e7\u00e3o do Blog\n      <\/h1>\n      <p class=\"mt-4 text-base sm:text-lg text-primary\/80 max-w-3xl leading-relaxed\">\n        Documentando cada etapa da interface: das vari\u00e1veis do Tailwind \u00e0 componentiza\u00e7\u00e3o dos artigos.\n      <\/p>\n    <\/section>\n\n    <!-- Grid do Conte\u00fado (\u00c1rea de Posts + Sidebar) -->\n    <div class=\"mt-12 grid grid-cols-1 lg:grid-cols-12 gap-8\">\n      \n      <!-- Coluna Principal (Artigos) -->\n      <section class=\"lg:col-span-8 space-y-8\">\n        <!-- Inser\u00e7\u00e3o dos Cards de Artigos -->\n      <\/section>\n\n      <!-- Coluna Lateral (Sidebar) -->\n      <aside class=\"lg:col-span-4 space-y-6\">\n        <!-- Widgets de Busca e Categorias -->\n      <\/aside>\n\n    <\/div>\n\n  <\/div>\n<\/main><\/code><\/pre>\n\n\n\n
Mapeamento das Classes e Compatibilidade com o Header<\/h2>\n\n\n\n
A tabela abaixo detalha a rela\u00e7\u00e3o direta entre o estilo do <header><\/code> e as decis\u00f5es tomadas na tag <main><\/code>:<\/p>\n\n\n\n
Elemento no Header<\/strong><\/td>Classe Correspondente no Main<\/strong><\/td>Fun\u00e7\u00e3o na Interface<\/strong><\/td><\/tr>
h-20<\/code> (80px de altura)<\/td>pt-28<\/code> (112px de padding superior)<\/td>Mant\u00e9m o conte\u00fado vis\u00edvel e com espa\u00e7o de respiro em rela\u00e7\u00e3o ao header.<\/td><\/tr>
max-w-7xl mx-auto px-4…<\/td>max-w-7xl mx-auto px-4...<\/code><\/td>Mant\u00e9m o mesmo alinhamento das margens laterais do menu com o conte\u00fado.<\/td><\/tr>
border-subtle<\/code><\/td>border-subtle<\/code><\/td>Preserva a mesma cor suave para as linhas divis\u00f3rias.<\/td><\/tr>
text-accent<\/code> \/ text-brand<\/code><\/td>text-accent<\/code> \/ text-brand<\/code><\/td>Mant\u00e9m a identidade de cores da marca na hierarquia de t\u00edtulos e badges.
<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Destaques de UI e Acessibilidade<\/h2>\n\n\n\n
\n
\n
\n
\ud83d\udca1 Dica de Ouro:<\/strong> Repetir as classes de container como max-w-7xl mx-auto px-4 sm:px-6 lg:px-8<\/code> no <header><\/code>, no <main><\/code> e no <footer><\/code> garante que todos os blocos do site compartilhem rigorosamente a mesma linha guia vertical, eliminando quebras visuais ao rolar a p\u00e1gina em monitores ultra-wide.<\/p>\n<\/blockquote>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Alinhar a tag <main><\/code> com as especifica\u00e7\u00f5es exatas do seu <header><\/code> evita problemas recorrentes de sobreposi\u00e7\u00e3o e mant\u00e9m o c\u00f3digo sem\u00e2ntico e organizado.<\/p>\n\n\n\n
Com o grid de 12 colunas preparado no <main><\/code>, o pr\u00f3ximo passo \u00e9 popular a coluna de 8 colunas com os Cards de Artigos<\/strong>, utilizando as classes bg-secondary<\/code>, border-subtle<\/code> e os estados interativos do Tailwind CSS!<\/p>\n\n\n\n
Voc\u00ea j\u00e1 teve problemas com elementos fixos cobrindo o conte\u00fado no CSS?<\/strong> Conte sua experi\u00eancia nos coment\u00e1rios abaixo!<\/p>\n<\/blockquote>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
No primeiro artigo da nossa s\u00e9rie, vimos como construir um cabe\u00e7alho fixo usando utilit\u00e1rios 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\u00e2ntica de cores e ter uma compensa\u00e7\u00e3o de altura precisa para evitar que […]<\/p>\n","protected":false},"author":2,"featured_media":166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[],"class_list":["post-165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":1,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/165\/revisions\/167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media\/166"}],"wp:attachment":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}