Como eu criei meu footer Responsivo com Tailwind CSS
📌 Navegue por tópicos
Intradução:
Como eu criei meu footer Responsivo com Tailwind CSS
Depois de estruturar o
<header>e organizar o contêiner<main>, chegamos à etapa final da interface do nosso blog: a criação do Footer (Rodapé). Nesse post vou mostrar como foi feito o footer do meu projeto aqgoes.com/blog.Embora muita gente deixe o rodapé por último ou nem dê muita atenção para ele, essa parte da tela é fundamental para dar um acabamento profissional ao site, colocar os links das minhas redes sociais e garantir os avisos de copyright.
O Problema do Rodapé “Subindo” no Meio da Tela
Se você desenvolve pra web há algum tempo, com certeza já passou por isso: quando a página tem pouco texto, o rodapé acaba “subindo” e fica flutuando no meio da tela. Visualmente fica horrível.
Para resolver isso aqui no blog, eu usei uma combinação simples: defini a altura mínima do conteúdo principal (<main>) com min-h-screen e apliquei a classe mt-auto na tag <footer>. Pronto! O rodapé fica sempre “empurrado” lá pro final da tela, não importa se o post é longo ou curto.
O Código Real do Meu Footer
Dá uma olhada em como ficou a estrutura de código que estou usando no meu projeto:
<!-- FOOTER -->
<footer class="border-t border-subtle bg-secondary py-12 transition-colors duration-300 mt-auto">
<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">
<!-- Minha Marca e Copyright -->
<div class="flex items-center gap-2">
<span class="font-title font-bold text-base text-primary">DevBlog.</span>
<span>© 2026 Todos os direitos reservados.</span>
</div>
<!-- Links de Navegação e Redes -->
<div class="flex gap-6">
<a href="#" class="hover:text-brand transition-colors">Portfólio</a>
<a href="#" class="hover:text-brand transition-colors">GitHub</a>
<a href="#" class="hover:text-brand transition-colors">LinkedIn</a>
<a href="#" class="hover:text-brand transition-colors">Privacidade</a>
</div>
</div>
</footer>Entendendo as Escolhas de Classes no Tailwind
Vou destacar as classes que eu mais gostei de usar para resolver o visual desse componente:
| Classe Tailwind | O que ela faz na prática? |
border-t border-subtle | Cria aquela linha bem suave no topo para separar o rodapé do resto do site. |
bg-secondary | Usa a cor secundária do meu tema, adaptando na hora se o usuário mudar para o Modo Escuro. |
mt-auto | O “truque da mágica” para colar o rodapé no final da página quando tem pouco conteúdo. |
| No celular os elementos ficam um embaixo do outro; no computador eles ficam lado a lado. |
Dica Prática de Quem Está Desenvolvendo
💡 Dica de Ouro: Não troque a tag
<footer>por uma<div>comum. Usar a tag correta do HTML5 ajuda bastante os leitores de tela para pessoas com deficiência e facilita o trabalho dos motores de busca (Google) para entenderem o final da sua página.
Conclusão
Com o footer pronto, fechei a estrutura base de layout da página do blog! Agora o site conta com um cabeçalho fixo, uma área principal organizada e um rodapé bem ajustado para qualquer tamanho de tela.
Nos próximos posts vou começar a mostrar como implementei a lógica em JavaScript para deixar tudo isso ainda mais interativo.
Como você costuma montar o footer nos seus projetos? Prefere um visual mais minimalista como o meu ou aqueles footers cheios de colunas e links? Me conta aqui nos comentários!
💡 Veja também
