Explorando Backgrounds com Tailwind - Parte 1

No artigo de hoje, aprenderemos a utilizar alguns conjuntos de classes disponibilizadas pelo Tailwind voltadas ao uso e manipulação de backgrounds, que são um conjunto de atributos que definem estilizações para o fundo dos elementos. Vamos lá?

O Tailwind é um framework criado com o objetivo de melhorar o uso do CSS. Normalmente, a estilização de documentos é feita por meio da importação de um arquivo com extensão .css que possui a descrição dos atributos das classes que utilizaremos em cada elemento. Ao invés disso, visando facilitar a nossa vida, o Tailwind CSS disponibiliza um conjunto de classes arquitetadas no modelo atomic css, onde cada uma possui uma única função, como por exemplo, aplicar a cor preta para o fundo de um elemento, ou, transformar o seu texto em sublinhado.

Desta forma, basta adicionar este framework ao seu projeto e todas estas classes já são disponibilizadas para uso, sendo necessário apenas inseri-las corretamente em cada elemento.

Todo este conjunto de classes pode ser encontrado na documentação do Tailwind CSS e, mesmo que nenhuma delas corresponda a sua necessidade, você também pode criar uma nova que o faça!

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind CSS que, além de ser auto intuitivo, possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo: object-fit, margin ou display), disponibilizado o nome da classe que atende à demanda e como utilizá-la.

Dicas para utilizar o Tailwind CSS

Existem diversas formas de instalar o Tailwind CSS no seu projeto, de acordo com a tecnologia que você está utilizando. Na documentação deste framework há um guia prático para cada cenário onde ele pode ser utilizado. Basta seguir o passo a passo específico em que sua situação se encaixa e ser feliz!

Primeiros passos

Antes de conversarmos mais sobre algumas propriedades que compõem o conceito de background, precisamos criar um espaço onde trabalharemos com eles. Vamos então criar um documento que tenha uma série de elementos, dos quais poderemos aplicar em cada um deles o que estamos aprendendo:

Na Figura 2, criamos um contêiner principal onde em seu interior há outros quatro contêineres. No contêiner principal utilizamos as seguintes classes:

• w-full: fixa a largura do contêiner para 100% do tamanho da largura disponível;
• h-screen: define a altura do contêiner para 100% da altura da viewport (ou seja, 100% da tela disponível para visualização);
• grid: habilita a organização dos elementos internos no formato grade/tabela;
• grid-cols-2: define que a grade/tabela que estamos criando terá duas colunas;
• grid-rows-2: define que a grade/tabela que estamos criando terá duas linhas;
• gap-1: cria um espaçamento externo de 4px entre os elementos do contêiner principal;
• p-1: cria um espaçamento interno de 4px para o contêiner principal.
  

Caso você tenha executado este código que criamos, verá que nada será exibido neste momento. Isso acontece porque ainda não criamos nenhuma estilização para os contêineres internos: entenda que estamos criando o esqueleto do que está prestes a ser feito.

Background Color

Como o próprio nome já sugere, o Background Color é o responsável por inserirmos cores no fundo de um elemento. Existem diversas cores disponibilizadas pelo Tailwind CSS que podem ser encontradas muito bem descritas e organizadas na sua documentação. Salvo exceções, a maioria das cores estão divididas em nove tons diferentes, definidas pelas centenas de 100 a 900 (um background de 900 é mais escuro que um 100). Utilizamos estas classes por meio da seguinte notação:

bg-{cor}-{100-900}

É importante destacar que existem classes de mudança de cor de fundo que não seguem esta notação, sendo necessário apenas inseri-las sem a tonalidade, como por exemplo, a classe bg-black, que define a cor de fundo como preto. Como dito anteriormente, todas as especificações das classes disponibilizadas se encontram na documentação. Para o nosso exemplo, que tal definirmos para cada contêiner uma tonalidade de azul diferente?

Também é possível utilizar estas classes do Background Color para definir a opacidade. Fazemos isto de duas formas e utilizaremos ambas no código da Figura 5:

Nas duas formas apresentadas na Figura 5, utilizamos a escala de 0 a 100 para definir o nível de opacidade (lembrando apenas os múltiplos de 10 são válidos, como 20, 40, 50, 90, etc.). Mais fácil que isso? Impossível!

Se você olhou todas as cores disponibilizadas pelo Tailwind e não se sentiu satisfeito, eu tenho uma notícia incrível para você: é possível criar qualquer cor que você quiser. Independente da forma como você configurou o seu Tailwind, deve ter notado que, seja por meio de um script no “head” do arquivo HTML ou pela criação de um arquivo separado, existe um objeto “tailwind.config” inserido no nosso projeto:

O Tailwind.config é criado de uma forma diferente para cada maneira como você escolhe instalar o framework, mas não se desespere: Se você seguiu o passo a passo completo, em algum momento você o implementou e é nele que iremos trabalhar.

Na Figura 7, dentro do objeto extend, foi criado um objeto chamado colors, que possui uma chave (regal-blue) e um valor (#243c5a). É assim que criamos uma classe com uma nova cor: definimos o seu nome (que na figura 7 foi regal-blue) e depois, definimos o valor da cor que desejamos, valendo-se dos padrões aceitos para definição de cores no CSS (sempre no formato string). Por fim, inserimos o nome da classe criada juntamente com o prefixo bg- e tudo pronto: a cor foi aplicada.

Background Clip

Utilizamos o Background Clip para delimitar a área em que a cor de fundo criada será aplicada em um elemento. Para isto, utilizamos uma das três possibilidades:

• bg-clip-border - estende a área de exibição da cor do background inserido até a borda existente;
• bg-clip-padding - estende a área de exibição da cor do background inserido até o espaçamento interno, mas sem atingir a borda;
• bg-clip-content - estende a área de exibição da cor do background inserido até o conteúdo do elemento em questão, mas sem atingir o espaçamento interno.
  

Observe o seguinte código e entenda as três aplicações:

Inserimos classes que criam uma borda em cada elemento para que seja possível observarmos como cada classe do Background Clip atua. Foram elas:

• border-8 - define uma espessura para a borda de 8px;
• border-violet-300 - aplica para a borda uma cor violeta com tonalidade 300;
• border-dashed - altera o modelo da borda para o estilo pontilhado.
  

Também é possível utilizar o Background Clip para delimitar a atuação da cor background para o texto que estiver dentro do elemento. Para isto, utilizamos a classe bg-clip-text. Veja:

Também utilizamos algumas classes adicionais nessa nova implementação além do bg-clip-text, que foram:

• flex - habilita para o elemento as funcionalidades do Flexbox para o contêiner para que possamos utilizar as classes “justify-center” e “items-center” para alinhamento dos elementos internos;
• justify-center - alinha os itens dentro do contêiner ao centro, em relação ao eixo principal que estão atrelados (que neste caso é o eixo x);
• items-center - alinha os itens dentro do contêiner ao centro, em relação ao eixo transversal (que neste caso é o eixo y).
• text-transparent - Torna a cor do texto como transparente para sua cor original não colidir com a do background que será a nova cor dele;
• text-6xl - Define o tamanho da fonte do texto para 60px;
• font-bold - Cria um efeito negrito no texto do elemento.

Considerações finais

O background é um conceito crucial na vida de quem escolheu o caminho do Front-end e do CSS. A sugestão principal aqui é praticar muito para fixar estes conhecimentos da melhor maneira possível. Em breve, voltaremos com mais sobre o background, então fique atento que daqui a pouco tem mais! Por enquanto, espero que esse artigo te ajudou a dominar as classes do Tailwind relacionadas ao background.

Se você achou esse artigo interessante, gostaria de tirar quaisquer dúvidas ou somente está afim de trocar uma ideia sobre esses e mais assuntos, você também pode entrar em contato comigo, seja por meio do e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn!

Te espero ansiosamente!