Convenção

Usamos uma convenção simples de fundo e primeiro plano para cores. A variável background é usada para a cor de fundo do componente e a variável foreground é usada para a cor do texto

A cor de fundo do componente a seguir será hsl(var(--brand)) e a cor de primeiro plano será hsl(var(--brand-foreground)).

<div className="bg-brand text-brand-foreground">Hello</div>

Principais cores

Brand - Cor da marca

<div className="text-brand font-semibold">Hello</div>

Secondary

<div className="text-secondary font-semibold">Hello</div>

Muted

<div className="text-muted-foreground font-semibold">Hello</div>

Success

<div className="text-success font-semibold">Hello</div>

Warning

<div className="text-warning font-semibold">Hello</div>

Error

<div className="text-destructive font-semibold">Hello</div>

Background

Default

<div className="bg-background">Hello</div>

Screen

<div className="bg-background-screen">Hello</div>

Outras cores

Consulte a documentação CSS do Tailwind para obter mais informações sobre o uso de cores