1. O Que E a Paleta do Tailwind

O Tailwind CSS inclui uma paleta de cores padrao cuidadosamente elaborada, projetada para ser usada diretamente em projetos profissionais sem a necessidade de definir cores manualmente. A paleta cobre 22 familias cromaticas, cada uma com 11 tons progressivos numerados de 50 a 950.

Diferente de outras abordagens que usam nomes semanticos vagos como "primary" ou "danger", o Tailwind opta por nomes especificos como blue-500 ou rose-300, tornando o codigo mais previsivel e autoconsistente.

2. Estrutura e Nomenclatura

Cada cor no Tailwind segue o padrao nome-tom, onde o nome e a familia cromatica e o tom e um numero de 50 a 950. Quanto menor o numero, mais claro o tom; quanto maior, mais escuro.

• Familias neutras: slate, gray, zinc, neutral, stone
• Familias quentes: red, orange, amber, yellow
• Familias frias: green, emerald, teal, cyan, sky, blue, indigo, violet
• Familias vibrantes: purple, fuchsia, pink, rose

3. Como Usar as Classes de Cor

As cores do Tailwind podem ser aplicadas a qualquer propriedade CSS que aceite cor. Os prefixos mais comuns sao:

• bg-{cor}-{tom} — cor de fundo
• text-{cor}-{tom} — cor do texto
• border-{cor}-{tom} — cor da borda
• ring-{cor}-{tom} — cor do ring (outline)
• shadow-{cor}-{tom} — cor da sombra (v3+)

4. Personalizando a Paleta

No arquivo tailwind.config.js voce pode estender ou substituir a paleta padrao. Para adicionar uma cor customizada sem remover as existentes, use theme.extend.colors. Para substituir completamente, defina em theme.colors.

"A paleta padrao do Tailwind cobre a vasta maioria dos casos de uso em interfaces modernas, mas a flexibilidade de customizacao garante que nenhum design fique sem suporte."

5. Acessibilidade e Contraste

Ao combinar cores de texto e fundo, e importante garantir contraste adequado conforme as diretrizes WCAG 2.1. Regras praticas:

• Para texto normal: razao de contraste minima de 4.5:1
• Para texto grande: razao de contraste minima de 3:1
• Tons 600+ sobre fundo branco geralmente satisfazem o nivel AA
• Tons 50-100 como fundo combinam bem com tons 700-900 do mesmo nome

6. Perguntas Frequentes

Posso usar as cores fora do Tailwind?

Sim. Os valores hex mostrados nesta ferramenta podem ser usados em qualquer contexto CSS, design system ou ferramenta de design.

O tom 950 existe em todas as versoes?

Nao. O tom 950 foi adicionado no Tailwind CSS v3.3. Em versoes anteriores, o tom mais escuro disponivel e o 900.

Qual a diferenca entre slate, gray, zinc, neutral e stone?

Sao cinco variacoes de cinza com temperaturas de cor ligeiramente diferentes. Slate tem tom azulado, zinc tem tom neutro-frio, neutral e completamente neutro, stone tem tom ligeiramente quente e gray fica entre slate e zinc.