6 minutos de leitura
Autor(a)
Sou Bacharela em Sistemas de Informação, Técnica em Desenvolvimento de Sistemas pela ETEC e atuo como Analista de Suporte Educacional na Alura, onde respondo as dúvidas que surgem no fórum, principalmente na área de Front-end. Sou apaixonada por tecnologia e busco sempre aprender coisas novas. Meus hobbies favoritos são ler, estudar novos idiomas e assistir séries de comédia.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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.
Para acompanhar este tutorial sem dores de cabeça, você precisa ter ter:
Avalie este artigo
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"; Imagine que queremos criar um card de perfil. No modelo tradicional, o processo seria:
É um processo que funciona, mas que separa o estilo da estrutura e isso dificulta a manutenção quando o projeto cresce.
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:
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.
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
Seguir Perfil
);
}
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>
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:
Se você achar que o className está ficando muito longo, lembre-se que o React é seu aliado:
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!
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!
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.
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
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.
