Embora a paleta padrão do Tailwind CSS seja extensa, muitas vezes é necessário aplicar as cores da identidade visual da sua marca ou de um projeto específico. Para isso, o Tailwind permite personalizar, estender ou substituir as cores padrão no arquivo tailwind.config.js.
Estendendo a paleta padrão
Você pode adicionar novas cores personalizadas mantendo todas as cores padrão do Tailwind intactas:
module.exports = {
theme: {
extend: {
colors: {
primary: '#1e3a8a',
secondary: '#64748b',
destaque: {
light: '#fde68a',
DEFAULT: '#facc15',
dark: '#ca8a04'
}
}
}
}
}
Exemplo de uso no HTML:
<button class="bg-primary text-white px-4 py-2 rounded">
Botão com cor personalizada
</button>
<p class="text-destaque-dark">Texto com variação de cor customizada</p>
Substituindo completamente a paleta
Se desejar remover a paleta padrão e usar apenas suas próprias cores, utilize:
module.exports = {
theme: {
colors: {
primary: '#0d9488',
white: '#ffffff',
black: '#000000',
}
}
}
Neste caso, as cores do Tailwind original (como blue, gray, etc.) deixam de estar disponíveis.
Cores com estados (hover, focus)
As cores personalizadas funcionam normalmente com os prefixos de estado:
<a href="#" class="text-primary hover:text-destaque-dark">
Link com efeito hover
</a>
Cores no modo escuro (dark mode)
Você pode definir variações de cor para o modo escuro usando o prefixo dark::
<p class="text-gray-800 dark:text-gray-200">
Este texto muda de cor no modo escuro
</p>
Organização recomendada
É comum usar nomes semânticos (como primary, error, success, warning) para facilitar a manutenção e permitir mudanças futuras sem alterar dezenas de arquivos HTML.
Ferramentas externas
Para gerar paletas harmônicas ou inspiradas em marcas, você pode usar:
Customizar as cores no Tailwind CSS é uma forma poderosa de alinhar sua interface à identidade da marca, mantendo o framework leve e modular.