Paleta de Cores Padrão

O Tailwind CSS vem com uma paleta de cores extensa e pronta para uso, organizada em escalas de intensidade que variam de 50 (mais claro) a 950 (mais escuro). Essa abordagem facilita a criação de interfaces harmônicas, com contraste e hierarquia visual bem definidas.

Organização da paleta #

Cada cor é apresentada com até 10 variações, numeradas de forma crescente:

| Escala | Descrição | | --------- | ---------------- | | 50 | Muito clara | | 100–300 | Tons suaves | | 400–600 | Tons padrão/base | | 700–900 | Tons escuros | | 950 | Muito escuro |

Exemplos de cores disponíveis #

Azul (`blue`) #

<div class="bg-blue-100 text-blue-800 p-4 rounded">Informação</div>

| Classe | Cor | | ------------- | ---------------- | | bg-blue-50 | Azul muito claro | | bg-blue-500 | Azul padrão | | bg-blue-900 | Azul escuro |

Vermelho (`red`) #

<div class="bg-red-100 text-red-800 p-4 rounded">Erro</div>

Verde (`green`) #

<div class="bg-green-100 text-green-800 p-4 rounded">Sucesso</div>

Cinza (`gray`) #

<p class="text-gray-600">Texto neutro</p>

Outras cores disponíveis #

Além de blue, red, green e gray, a paleta padrão inclui:

indigo
purple
pink
yellow
orange
teal
cyan
emerald
lime
amber
stone
zinc
neutral
slate

Uso em texto, fundo e borda #

text-{cor}-{intensidade}
bg-{cor}-{intensidade}
border-{cor}-{intensidade}

Exemplo combinado:

<div class="bg-yellow-100 text-yellow-800 border border-yellow-300 p-4 rounded">
  Alerta: Atenção necessária
</div>

Cores automáticas para estados #

Tailwind também oferece classes semitônicas para ações comuns:

text-white, text-black
bg-transparent
hover:bg-blue-700
focus:ring-blue-500
disabled:opacity-50

A paleta padrão do Tailwind cobre a maioria das necessidades de design visual em aplicações web. Na próxima página, vamos ver como customizar essa paleta para criar uma identidade visual própria para seu projeto.