Paleta de cores do Tailwind

A paleta de cores padrão do Tailwind contém 22 famílias de cores nomeadas, cada uma com 11 tonalidades numeradas de 50 a 950. As famílias incluem neutros (slate, gray, zinc, stone, neutral), tons quentes (red, orange, amber, yellow), tons frios (lime, green, emerald, teal, cyan, sky, blue, indigo, violet) e acentos vibrantes (purple, fuchsia, pink, rose). Todas as tonalidades são pré-aprovadas para uso no seu sistema de design.

Os números das tonalidades comunicam a luminosidade: 50 é quase branco (um matiz sutil), 100–300 são pastéis claros, 400–600 são tons médios vibrantes, 700–800 são escuros e saturados, e 900–950 são quase pretos. Como regra geral, use 50–200 para fundos, 400–600 para ícones e acentos, e 700–900 para texto, garantindo contraste legível sobre branco.

Aplique cores de fundo com o utilitário bg-{color}-{shade}. Ele define background-color do CSS no elemento. Use uma tonalidade clara, como bg-indigo-50, para fundos sutis de seções; uma tonalidade intermediária, como bg-indigo-600, para botões principais; e uma tonalidade escura, como bg-indigo-950, para fundos de rodapés e barras laterais. Sempre combine-a com uma cor de texto que ofereça contraste suficiente.

Além da paleta numerada, o Tailwind oferece várias palavras-chave especiais de cor. bg-white e bg-black definem branco e preto puros. bg-transparent torna o fundo transparente (herdado do elemento pai). bg-current usa a cor atual do texto do elemento como fundo. bg-inherit herda explicitamente o fundo do elemento pai.

Escolher entre cores quentes e frias afeta o tom emocional do seu design. Cores quentes (red, orange, amber, yellow) transmitem energia, urgência e calor — ótimas para alertas, distintivos de promoção e estados de aviso. Cores frias (blue, indigo, teal, cyan) transmitem confiança, calma e profissionalismo — ideais para ações principais, painéis de dados e aplicações corporativas.

O Tailwind tem cinco famílias de cinzas neutros: slate (matiz azul-acinzentado), gray (neutro), zinc (levemente quente), neutral (neutro puro) e stone (bege quente). A escolha entre elas é sutil, mas importante para a identidade da marca. Slate combina com produtos de tecnologia e para desenvolvedores. Gray funciona de forma universal. Stone combina com marcas naturais e terrosas. Escolha uma e use-a de forma consistente em todo o projeto.

Um uso prático das famílias de cores do Tailwind é criar um sistema de indicadores de status. Associe estados semânticos a famílias de cores: sucesso a green, aviso a yellow, erro a red, informação a blue e neutro a gray. Use a tonalidade 100 para o fundo e a tonalidade 700 para o texto, garantindo contraste e coerência visual.

O modificador de opacidade com barra também funciona para cores de fundo. bg-blue-600/20 aplica a cor blue-600 com 20% de opacidade, criando um efeito de tonalidade translúcida. Isso é usado com frequência em fundos sobrepostos, efeitos de vidro fosco e fundos coloridos de destaque atrás do conteúdo, sem ocultar completamente o que está atrás deles.

Um padrão comum é escolher uma cor primária para os principais elementos interativos e uma cor de destaque para realçar informações importantes. Por exemplo, indigo como cor primária e amber como cor de destaque. Ambas já estão presentes na paleta do Tailwind, então você tem imediatamente um espectro completo de tonalidades sem precisar configurar nada.

No modo escuro, os fundos passam de tons claros para tons escuros. Use o prefixo dark: para definir cores de fundo para o tema escuro. Um padrão comum: fundo principal bg-white dark:bg-gray-900, superfície de cartão bg-gray-50 dark:bg-gray-800 e elementos elevados bg-white dark:bg-gray-700. Esse sistema de elevação em três níveis cria profundidade em interfaces escuras.

Se a paleta padrão não combinar com sua marca, estenda-a em tailwind.config.js, dentro de theme.extend.colors. Você pode adicionar famílias de cores inteiramente novas com tons personalizados ou adicionar uma única cor da marca. Depois de definida, a nova cor fica disponível em todos os utilitários do Tailwind: bg-brand-500, text-brand-700, border-brand-300 etc.

Nesta lição, você aprendeu que: cada uma das 22 famílias de cores do Tailwind tem 11 tons, de 50 (claro) a 950 (escuro); bg-{color}-{shade} aplica uma cor de fundo, e o modificador /opacity adiciona transparência; e cores quentes transmitem urgência, enquanto cores frias transmitem confiança. A seguir, criaremos gradientes com os utilitários de fundo em gradiente do Tailwind.