Estilização em React: do CSS tradicional ao Tailwind CSS
Olá, Dev!
Se você já sabe o "arroz com feijão" do React, mas sente que perde muito tempo indo e voltando em arquivos .css e gastando energia para inventar nomes de classes, este artigo é para você.
Vamos transformar o seu fluxo de trabalho criando um componente moderno, rápido e sem sair do seu arquivo JSX, migrando do CSS puro para o Tailwind.
Pré-requisitos para começar
Para acompanhar este tutorial sem dores de cabeça, você precisa ter ter:
- Node.js v18.0 ou superior instalado.
- Um projeto React já inicializado (preferencialmente usando Vite).
- Conhecimentos básicos em CSS.
- Conhecimento básico de React.
- O repositório do projeto apresentado é esse, você pode acessar e acompanhar o código e a leitura juntos!
Como preparar o ambiente para utilizar o Tailwind CSS (v4)?
Neste guia, vamos partir do princípio que você já tem um projeto React (Vite) criado e está pronto para começar a estilizar. Se você ainda não criou o seu, pode fazer isso rapidinho rodando npm create vite@latest meu-projeto -- --template react em seu terminal.
Com a pasta do seu projeto aberta no VSCode, vamos instalar as ferramentas do Tailwind v4 através do terminal integrado:
npm install tailwindcss @tailwindcss/postcss postcss autoprefixer Agora, criamos um arquivo chamado postcss.config.js na raiz do projeto e adicionamos este código:
export default {
plugins: {
"@tailwindcss/postcss": {},
autoprefixer: {},
},
}Para finalizar a configuração, vá no seu arquivo src/index.css, apague todo o conteúdo antigo e use a nova diretiva simplificada do Tailwind v4:
@import "tailwindcss"; O Desafio: como faríamos com CSS Puro?
Imagine que queremos criar um card de perfil. No modelo tradicional, o processo seria:
- Criar um arquivo Card.css.
- Inventar nomes como .profile-card-container e .profile-img.
- Escrever várias linhas de código para sombra, bordas e alinhamento.
- Importar o arquivo no seu componente React.
É um processo que funciona, mas que separa o estilo da estrutura e isso dificulta a manutenção quando o projeto cresce.
O que são as classes utilitárias e como elas funcionam?
No Tailwind, você não cria classes do zero. Você usa utilitários que já existem. É como se você fosse montar um LEGO: cada peça tem uma função específica. Por exemplo:
- bg-white aplica a cor de fundo branca.
- p-6 aplica um espaçamento interno (padding).
- rounded-2xl arredonda os cantos.
Dica: Se você sabe CSS, você já sabe Tailwind. Você só precisa aprender o "atalho" de cada propriedade. Nessas horas, a documentação do Tailwind será sua melhor amiga.
Como criar o seu primeiro componente estilizado com Tailwind?
Vamos construir o nosso Card de Perfil. Copie o código abaixo no seu componente e veja o resultado:
export default function ProfileCard() {
return (
<div className="bg-white p-6 rounded-3xl shadow-xl max-w-xs border border-gray-100">
<img
src="https://github.com/octocat.png"
alt="Foto de Perfil"
className="w-24 h-24 rounded-full border-4 border-blue-50 mx-auto"
/>
<div className="text-center mt-4">
<h2 className="text-xl font-bold text-gray-800">Octo Cat</h2>
<p className="text-blue-600 font-medium">Dev Front-end</p>
</div>
<button className="w-full bg-blue-600 text-white font-bold py-3 rounded-xl mt-6">
Seguir Perfil
</button>
</div>
);
}O que aconteceu aqui?
- mx-auto: Centralizou a foto horizontalmente através de margens automáticas.
- shadow-xl: Deu aquela profundidade bonita e moderna ao card.
- max-w-xs: Garantiu que o card tenha um tamanho fixo no desktop.
Como lidar com estados (Hover) de forma direta usando Tailwind?
Quer que o botão mude de cor ao passar o mouse? Não vamos precisar criar um arquivo CSS separado pra fazer isso. Basta usar o prefixo hover: direto no elemento:
<button className="w-full bg-blue-600 hover:bg-blue-700 transition-all text-white font-bold py-3 rounded-xl mt-6">
Seguir Perfil
</button>- hover:bg-blue-700: Troca a cor do botão para um tom mais escuro no hover.
- transition-all: Deixa essa troca uma animação suave, mais profissional, né?
Como ajustar o layout para celular e desktop em Tailwind?
O Tailwind segue a filosofia Mobile First. O estilo padrão que escrevemos é para celular. Para mudar algo em telas maiores como em tablets e PCs, usamos o prefixo md:.
<div className="w-full md:w-80 ..."> Aqui dizemos: "No celular, ocupe a largura total (w-full). No computador (medium screens), use um tamanho fixo (w-80)".
Em alguns poucos passos, nosso card ficou assim, estilizado, com animação no hover e responsivo:
Como não se perder nas classes Tailwind?
Se você achar que o className está ficando muito longo, lembre-se que o React é seu aliado:
- Componentize: Se o seu botão é muito complexo, transforme-o em um componente separado como <MyButton />.
- Extensão: Instale a extensão Tailwind CSS IntelliSense no VSCode. Ela autocompleta as classes e mostra a cor exata que você está selecionando.
Porque utilizar Tailwind no React?
O Tailwind v4 simplificou a forma como estilizamos no React. Você ganha velocidade, evita arquivos duplicados e mantém seu estilo exatamente onde sua estrutura está. No começo parece estranho ver tantas classes no HTML, mas depois do primeiro card pronto, você não vai querer voltar atrás!
Como aprender mais sobre o tema?
Ficou com vontade de aprender mais sobre Tailwind e outras ferramentas para otimizar seus projetos React?
Na Carreira Desenvolvimento Front-end React, você vai do primeiro componente à liderança técnica, aprende do básico ao avançado e domina TypeScript, arquitetura e performance!
Continue buscando conhecimento e até a próxima!
FAQ | Perguntas Frequentes sobre Estilização em React
1. Como implementar Dark Mode com Tailwind CSS no React?
O Tailwind tem suporte nativo a dark mode. Na versão v4 (usada neste tutorial), o modo escuro é ativado por padrão via prefers-color-scheme do sistema operacional do usuário. Para ter controle manual, ou seja, um botão de alternância na interface, você adiciona a diretiva @variant dark (&.dark) no seu CSS e manipula a classe dark no elemento <html> via JavaScript.
A partir daí, basta prefixar qualquer classe com dark: para definir o estilo no tema escuro: por exemplo, bg-white dark:bg-gray-900 deixa o fundo branco no modo claro e cinza escuro no modo dark. O estado do tema pode ser salvo no localStorage para persistir a preferência do usuário entre sessões.
3. Como customizar cores, fontes e espaçamentos no Tailwind v4?
O Tailwind v4 mudou a forma de personalizar o tema: em vez de editar um arquivo tailwind.config.js separado, as customizações agora são feitas diretamente no CSS usando variáveis nativas. No seu index.css, você pode definir tokens assim:
@import "tailwindcss";
@theme {
--color-brand: #6366f1;
--font-sans: "Inter", sans-serif;
}Feito isso, a classe bg-brand passa a existir automaticamente no seu projeto. Certifique-se de estender o tema corretamente para não sobrescrever os valores padrão, a ideia é sempre adicionar ao que já existe, não substituir. Tailwindcss
4. O Tailwind não deixa o CSS muito pesado em produção por ter tantas classes?
Não. Esse é um dos pontos fortes do Tailwind. O Tailwind utiliza um compilador Just-in-Time (JIT) que compila apenas o CSS como e quando ele é necessário, ou seja, somente as classes que você realmente usou no código vão parar no arquivo final. O resultado é um CSS extremamente enxuto em produção.
O arquivo grande só aparece no ambiente de desenvolvimento, onde todas as possibilidades ficam disponíveis para o IntelliSense funcionar. Em projetos reais, o bundle de CSS costuma ficar menor do que com CSS tradicional, justamente porque não há regras duplicadas ou esquecidas acumulando peso.
