{"id":168,"date":"2026-09-11T19:12:06","date_gmt":"2026-09-11T22:12:06","guid":{"rendered":"https:\/\/aqgoes.com\/blog\/?p=168"},"modified":"2026-09-11T19:17:09","modified_gmt":"2026-09-11T22:17:09","slug":"como-eu-criei-meu-footer-responsivo-tailwind-css","status":"publish","type":"post","link":"https:\/\/aqgoes.com\/blog\/como-eu-criei-meu-footer-responsivo-tailwind-css\/","title":{"rendered":"Como eu criei meu footer Responsivo com Tailwind CSS"},"content":{"rendered":"\n

Intradu\u00e7\u00e3o:<\/h2>\n\n\n\n
\n

Como eu criei meu footer Responsivo com Tailwind CSS<\/strong><\/p>\n\n\n\n

Depois de estruturar o <header><\/code> e organizar o cont\u00eainer <main><\/code>, chegamos \u00e0 etapa final da interface do nosso blog: a cria\u00e7\u00e3o do Footer (Rodap\u00e9). Nesse post vou mostrar como foi feito o footer do meu projeto aqgoes.com\/blog<\/a><\/strong>.<\/p>\n\n\n\n

Embora muita gente deixe o rodap\u00e9 por \u00faltimo ou nem d\u00ea muita aten\u00e7\u00e3o para ele, essa parte da tela \u00e9 fundamental para dar um acabamento profissional ao site, colocar os links das minhas redes sociais e garantir os avisos de copyright.<\/p>\n<\/blockquote>\n\n\n\n

O Problema do Rodap\u00e9 “Subindo” no Meio da Tela<\/h2>\n\n\n\n

Se voc\u00ea desenvolve pra web h\u00e1 algum tempo, com certeza j\u00e1 passou por isso: quando a p\u00e1gina tem pouco texto, o rodap\u00e9 acaba “subindo” e fica flutuando no meio da tela. Visualmente fica horr\u00edvel.<\/p>\n\n\n\n

Para resolver isso aqui no blog, eu usei uma combina\u00e7\u00e3o simples: defini a altura m\u00ednima do conte\u00fado principal (<main><\/code>) com min-h-screen<\/code> e apliquei a classe mt-auto<\/code> na tag <footer><\/code>. Pronto! O rodap\u00e9 fica sempre “empurrado” l\u00e1 pro final da tela, n\u00e3o importa se o post \u00e9 longo ou curto.<\/p>\n\n\n\n

O C\u00f3digo Real do Meu Footer<\/h2>\n\n\n\n

D\u00e1 uma olhada em como ficou a estrutura de c\u00f3digo que estou usando no meu projeto:<\/p>\n\n\n\n

<!-- FOOTER -->\n<footer class=\"border-t border-subtle bg-secondary py-12 transition-colors duration-300 mt-auto\">\n  <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted\">\n    \n    <!-- Minha Marca e Copyright -->\n    <div class=\"flex items-center gap-2\">\n      <span class=\"font-title font-bold text-base text-primary\">DevBlog.<\/span>\n      <span>\u00a9 2026 Todos os direitos reservados.<\/span>\n    <\/div>\n\n    <!-- Links de Navega\u00e7\u00e3o e Redes -->\n    <div class=\"flex gap-6\">\n      <a href=\"#\" class=\"hover:text-brand transition-colors\">Portf\u00f3lio<\/a>\n      <a href=\"#\" class=\"hover:text-brand transition-colors\">GitHub<\/a>\n      <a href=\"#\" class=\"hover:text-brand transition-colors\">LinkedIn<\/a>\n      <a href=\"#\" class=\"hover:text-brand transition-colors\">Privacidade<\/a>\n    <\/div>\n\n  <\/div>\n<\/footer><\/code><\/pre>\n\n\n\n
Entendendo as Escolhas de Classes no Tailwind<\/h2>\n\n\n\n
Vou destacar as classes que eu mais gostei de usar para resolver o visual desse componente:<\/p>\n\n\n\n
Classe Tailwind<\/strong><\/td>O que ela faz na pr\u00e1tica?<\/strong><\/td><\/tr>
border-t border-subtle<\/code><\/td>Cria aquela linha bem suave no topo para separar o rodap\u00e9 do resto do site.<\/td><\/tr>
bg-secondary<\/code><\/td>Usa a cor secund\u00e1ria do meu tema, adaptando na hora se o usu\u00e1rio mudar para o Modo Escuro.<\/td><\/tr>
mt-auto<\/code><\/td>O “truque da m\u00e1gica” para colar o rodap\u00e9 no final da p\u00e1gina quando tem pouco conte\u00fado.<\/td><\/tr>
<\/td>No celular os elementos ficam um embaixo do outro; no computador eles ficam lado a lado.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Dica Pr\u00e1tica de Quem Est\u00e1 Desenvolvendo<\/h2>\n\n\n\n
\n
\n
\ud83d\udca1 Dica de Ouro:<\/strong> N\u00e3o troque a tag <footer><\/code> por uma <div><\/code> comum. Usar a tag correta do HTML5 ajuda bastante os leitores de tela para pessoas com defici\u00eancia e facilita o trabalho dos motores de busca (Google) para entenderem o final da sua p\u00e1gina.<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Com o footer pronto, fechei a estrutura base de layout da p\u00e1gina do blog! Agora o site conta com um cabe\u00e7alho fixo, uma \u00e1rea principal organizada e um rodap\u00e9 bem ajustado para qualquer tamanho de tela.<\/p>\n\n\n\n
Nos pr\u00f3ximos posts vou come\u00e7ar a mostrar como implementei a l\u00f3gica em JavaScript para deixar tudo isso ainda mais interativo.<\/p>\n\n\n\n
Como voc\u00ea costuma montar o footer nos seus projetos? Prefere um visual mais minimalista como o meu ou aqueles footers cheios de colunas e links?<\/strong> Me conta aqui nos coment\u00e1rios!<\/p>\n","protected":false},"excerpt":{"rendered":"
Intradu\u00e7\u00e3o: Como eu criei meu footer Responsivo com Tailwind CSS Depois de estruturar o <header> e organizar o cont\u00eainer <main>, chegamos \u00e0 etapa final da interface do nosso blog: a cria\u00e7\u00e3o do Footer (Rodap\u00e9). Nesse post vou mostrar como foi feito o footer do meu projeto aqgoes.com\/blog. Embora muita gente deixe o rodap\u00e9 por \u00faltimo […]<\/p>\n","protected":false},"author":2,"featured_media":169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,15],"tags":[19],"class_list":["post-168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","category-html-css","tag-front-end"],"_links":{"self":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/168","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=168"}],"version-history":[{"count":1,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/168\/revisions\/170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media\/169"}],"wp:attachment":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/tags?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}