English 中文 العربية 日本語 Português

Tailwind in React Estilização com Tailwind

Última atualização: 2026-11-03

Tailwind in React Estilização com Tailwind

O Tailwind CSS é um framework de CSS atômico: ele divide os estilos em classes de utilidade de propósito único que você escreve diretamente no className. Combinado com a concatenação condicional, o React permite expressar um sistema visual inteiro dentro do JSX sem trocar de arquivo, e como o motor JIT gera CSS apenas para as classes que você realmente usa, o pacote enviado permanece minúsculo. O resultado é um design system imposto pelo próprio compilador.

GrupoEcossistema
TipoBiblioteca
Desdev4 (padrão desde 2025, integrado via plugin do Vite)

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

npm install tailwindcss @tailwindcss/vite

/* index.css — Tailwind v4 is imported with a single line */
@import "tailwindcss";

// Utilities go straight into className; conditional concatenation is the key trick
<div className={`px-4 py-2 rounded ${active ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}>
  Button
</div>
// px-4 horizontal padding  py-2 vertical padding  rounded border radius  bg-blue-600 blue background

⚙️ Parâmetros

tailwind.config.jsO arquivo de configuração de tema da v3, onde você estende cores, espaçamentos e variantes personalizadas; na v4 o tema é configurado dentro do CSS com @theme.
@tailwindcss/vite pluginA forma recomendada de integrar o Tailwind a um projeto Vite: ele varre seu JSX em tempo de build, extrai os nomes de classe usados e gera a folha de estilo.

Retorna：Sem valor de retorno — veja o exemplo para o uso de bibliotecas de terceiros.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: a linha superior imprime a string de classes concatenada completa em fonte monoespaçada (classe base, classe de variante e a utilidade opacity-50 adicionada enquanto o botão está desabilitado); abaixo fica um botão no estilo Tailwind. Clicar nos botões primary / danger / ghost troca a paleta, e Disable / Enable demonstra a classe condicional e a aparência semitransparente. As classes reais do Tailwind precisam da folha de estilo para surtir efeito, então os estilos inline as substituem aqui.
▶ Experimente

💡 Pontos-chave

💡 Dica Mantenha uma ordem de escrita consistente — layout, depois espaçamento, depois cor — para que o código da equipe seja fácil de ler; a ordem em si não afeta a especificidade.
⚠️ Aviso Concatenar dinamicamente um nome de classe completo (como `bg-${color}-600`) não funciona — o scanner JIT não consegue ver o nome de classe final, então use um objeto de busca que mapeia uma chave para a string completa.
ℹ️ Informação Strings longas de nomes de classe que se repetem podem ser extraídas para um objeto constante ou para um helper cn()/clsx em vez de serem copiadas por todos os lugares.
css-modules styled-components conditional-rendering ui-libraries
Mais casos em breve.

📚 Tutoriais Relacionados

Opções de Estilização no React
Lição 21 do tutorial: adotar o Tailwind no React e compará-lo com CSS Modules e CSS-in-JS.

❓ Perguntas Frequentes

P Como gerencio um className muito longo?
R Extraia combinações comuns para um objeto constante, concatene-as com um helper cn()/clsx ou envolva-as em pequenos componentes. Nomes de classe longos são o preço inerente de colocar CSS no JSX, então resolva isso com organização, não com sintaxe.
P Por que nomes de classe concatenados dinamicamente não funcionam?
R O Tailwind JIT gera CSS apenas para nomes de classe que aparecem por completo na fonte, então `bg-${color}-600` fica invisível para o scanner. Escreva um mapeamento como { red: 'bg-red-600', blue: 'bg-blue-600' } e escolha o nome de classe completo pela chave.
P Como escolho entre Tailwind e CSS Modules?
R Escolha o Tailwind pela velocidade de desenvolvimento e um design system unificado; escolha CSS Modules quando precisar do poder do CSS clássico (animações complexas, pseudo-elementos) com forte isolamento. Os dois podem coexistir no mesmo projeto.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%