Classe de cores de fundo Tailwind: um guia completo
Neste artigo, exploraremos a classe Tailwind Background Color com mais detalhes, incluindo os valores disponíveis e as práticas recomendadas para usá-la com eficiência.
As cores de fundo são um aspecto crucial do design da web, pois podem ajudar a definir o tom e o humor de uma página da web, fornecer hierarquia visual e até mesmo transmitir a marca.
No Tailwind CSS , a classe Background Color é um utilitário versátil e poderoso que fornece uma maneira rápida e fácil de definir a cor de fundo de um elemento.
Cor de fundo do vento de cauda
Tailwind CSS oferece um conjunto abrangente de classes para definir a cor de fundo dos elementos HTML.
Essa classe é uma alternativa à propriedade CSS background-color e cobre todas as variações possíveis.
Ao usar a classe de cor de fundo do Tailwind, você pode definir facilmente a cor de fundo de um elemento, incluindo seu preenchimento e borda.
Sintaxe
<element class="background-{color}"></element>
Valores de cores de fundo do Tailwind
- background-transparent : define a cor de fundo como transparente.
- background-current : A cor de fundo depende da cor do elemento pai.
- background-black : Define a cor de fundo para preto.
- background-white : Define a cor de fundo para branco.
- background-gray-{intensity} : define a cor de fundo para um tom de cinza. O valor {intensity} varia de 50 a 900, sendo 50 o mais claro e 900 o mais escuro.
- background-red-{intensity} : Define a cor de fundo para um tom de vermelho.
- background-blue-{intensity} : Define a cor de fundo para um tom de azul.
- background-indigo-{intensity} : define a cor de fundo para um tom de índigo.
- background-purple-{intensity} : Define a cor de fundo para um tom de roxo.
- background-green-{intensity} : Define a cor de fundo para um tom de verde.
- background-yellow-{intensity} : Define a cor de fundo para um tom de amarelo.
- background-pink-{intensity} : Define a cor de fundo para um tom de rosa.
Para usar a classe de cor de fundo, adicione a classe background-{color} ao elemento, onde {color} é a cor de fundo desejada.
Abaixo estão exemplos de como usar as classes de cores de fundo do Tailwind :
Example:
Este é um exemplo da classe bg-current :
Example:
Usando bg-black como exemplo:
Example:
Usando bg-white como exemplo:
Example:
Como exemplo, aqui está uma classe bg-gray-400 em uso:
Example:
Este é um exemplo da classe bg-red-700 :
Example:
Usando bg-blue-700 como exemplo:
Example:
Como exemplo, aqui está uma classe bg-indigo-700 em uso:
Example:
Usando bg-purple-700 como exemplo:
Example:
Usando bg-green-700 como exemplo:
Example:
Veja a seguir um exemplo usando a classe bg-yellow-400 :
Example:
Veja a seguir um exemplo usando a classe bg-pink-500 :
Example:
Vale a pena notar que quando você usa a classe background-current, a cor de fundo será a mesma que a cor do texto.
Isso significa que o texto ficará invisível , mas ainda estará presente no código HTML.
