← Voltar ao blog
Tutorial Tailwind CSS Astro

Construindo um Portfólio com Tailwind CSS e shadcn/ui

Um guia passo a passo para criar um portfólio moderno usando Tailwind CSS, componentes shadcn/ui e suporte a tema escuro.

· 2 min de leitura

Por que Tailwind CSS + shadcn/ui?

Construir um portfólio do zero pode ser intimidante. Tailwind CSS oferece estilização utility-first que é rápida para iterar, enquanto shadcn/ui fornece componentes bonitos e acessíveis que você pode copiar para seu projeto.

A Stack

  • Astro — gerador de sites estáticos com arquitetura de ilhas
  • Tailwind CSS v4 — framework CSS utility-first
  • shadcn/ui — biblioteca de componentes reutilizáveis
  • React — para ilhas interativas

Configurando o Projeto

# Crie um novo projeto Astro
bun create astro@latest meu-portfolio

# Adicione Tailwind CSS
bun add tailwindcss @tailwindcss/vite

# Adicione integração React
bunx astro add react

Implementação do Dark Mode

Uma das features mais pedidas é o dark mode. Veja como implementar com um toggle:

function toggleTheme() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

O segredo é persistir a preferência do usuário no localStorage e aplicar antes da página renderizar para evitar flash de conteúdo sem estilo (FOUC).

Dicas de Design Responsivo

  1. Abordagem mobile-first — comece pela menor tela e escale para cima
  2. Use container queries — para responsividade a nível de componente
  3. Teste em dispositivos reais — emuladores não pegam tudo

Ganhos de Performance

A arquitetura de ilhas do Astro significa que JavaScript só é carregado onde necessário. Combinado com o purge do Tailwind, você obtém bundles minúsculos:

  • 0 KB JS em páginas estáticas
  • < 5 KB para componentes interativos
  • Pontuação perfeita no Lighthouse direto da caixa

Conclusão

Essa stack te dá o melhor dos dois mundos: um site estático e rápido com interatividade rica onde você precisa. O código-fonte completo deste portfólio está disponível no meu GitHub.

← Voltar ao blog