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.