Utilizando Bordas e Contornos com Tailwind

A estilização de aplicações é um conceito importantíssimo na vida de quem tem em seu dia a dia o desenvolvimento front-end. Uma boa estruturação para o seu site é fundamental, mas se ele não agradar aos olhos de quem o utiliza, não garantirá que este usuário vá embora e procure por uma aplicação melhor e mais bonita.

Sob essa necessidade, seria quase impossível que não surgissem formas de lidar com o CSS que facilitassem cada vez mais o seu uso e, hoje, aprenderemos dentro do Tailwind a utilizar bordas e contornos.

Um pouco mais sobre o Tailwind CSS

O Tailwind CSS é um framework criado por Adam Wathan com o intuito de, como já foi mencionado, tornar mais prática a interação com o CSS. Por meio desta ferramenta, a estilização deixa de ser realizada através de classes criadas em arquivos separados (que por sua vez possuem vários atributos) para classes que possuem uma única funcionalidade, como tornar a cor de fundo de um elemento preta, ou transformar o texto de um elemento em negrito. Esta forma de arquitetura de classes é chamada de Atomic CSS.

Antes que você comece a imaginar que isto pode se tornar complexo demais ao invés de facilitar a estilização, te convido a dar uma olhada na documentação do Tailwind CSS e ficar surpreso com o quanto é fácil achar exatamente qualquer implementação que você queira fazer no estilo da sua página e ainda mais: o quanto é prático criar atributos, caso você não encontre exatamente o que você deseja (embora eu julgue muito difícil que isso aconteça).

Se isso tudo ainda não te convenceu, todo o processo de estilização do Tailwind é focado no conceito mobile-first e a recursividade dentro desta ferramenta é infinitamente mais fácil do que se você estivesse fazendo com o CSS puro: é necessário apenas utilizar junções entre as classes com palavras que representem determinados tamanhos de tela.

O Tailwind CSS é para todos!

Na documentação do Tailwind CSS existem diversas formas de instalá-lo, de acordo com a tecnologia que você está utilizando e com cada uma que a ferramenta possui compatibilidade (e são muitas). Siga o passo a passo clicando no botão Get started na tela principal.

Bordas

A propriedade border dentro do CSS proporciona formas de estilização para bordas ao redor dos elementos HTML, podendo ser possível escolher para quais lados ela existirá, qual a forma de contorno, cor, espessura e etc. Por consequência e fazendo jus ao modelo Atomic CSS, o Tailwind possui diversas classes para este conjunto de propriedades relacionadas ao border, sendo estas as que abordaremos neste momento.

Utilize a classe border para habilitar todas as funcionalidades relacionadas a ela. Enquanto você não aplicar nenhuma outra classe de estilização de bordas além desta, uma borda sólida personalizada será criada, conforme no exemplo a seguir:

Border Width

O Border Width corresponde ao tamanho ou espessura que sua borda possuirá. A documentação proporciona diversas possibilidades e citarei as principais estruturas de classe para aplicar espessuras no Tailwind CSS:

• border-{tamanho} - criando uma classe com esta estrutura, você atribui uma espessura padrão para todas as imagens, sendo “tamanho” um dos tamanhos disponibilizados pelo Tailwind;
  
• border-{lado}-{tamanho} - também é possível criar uma espessura específica apenas para um lado: substitua “lado” por “l”(esquerda), “r”(direita), “t”(cima) ou “b”(baixo), lembrando que “tamanho” também deve ser alterado de maneira análoga à estrutura anterior;
  
• border-{eixo}-{tamanho} - é possível estilizar dois lados por vez (esquerda e direita substituindo “eixo” por “x”, cima e baixo substituindo “eixo” por “y”).
  

Para exemplificar, utilizaremos as três formas na aplicação da Figura 1, substituindo a classe border pelas seguintes classes:

Border Color

Como o próprio nome já sugere, o Border Color é responsável por alterar a cor de uma borda. Para alterar a cor, podemos criar classes de forma análoga às estruturas demonstradas para Border Width, substituindo agora “tamanho” por uma cor, conforme demonstraremos a seguir:

Todas as imagens que utilizei (bem como todas as que estão disponíveis ao se utilizar o Tailwind) podem ser encontradas em sua documentação, então não precisa ficar tentando adivinhar qual a estrutura de cores a ferramenta aceita, é só ir lá e dar uma olhadinha. Todavia, se nenhuma das cores lhe agradarem, você pode seguir a mesma estrutura de criação apresentada para o caso de não existir uma espessura desejada, substituindo “tamanho” pelo código da cor, como por exemplo border-y-[#243c5a].

Border Style

Como você pôde notar, todas as bordas que utilizamos até então são sólidas. Todavia, não precisamos nos ater apenas a este estilo de borda (ela é apenas a forma estilizada por padrão quando não definimos outras formas). Ao total, existem quatro estilos de borda disponíveis, sendo eles:

• border-solid - é o estilo que já conhecemos e que preenche todo o contorno da borda;
  
• border-dashed - cria um estilo tracejado para a borda;
  
• border-dotted - define um estilo pontilhado para a borda;
  
• border-double - cria duas bordas sólidas ao redor do elemento.
  

Border Radius

Utilizamos o Border Radius quando queremos arredondar os extremos das bordas de um elemento. A estrutura de classes a serem implementadas para este fim são parecidas com as apresentadas para Border Width e Border Color, com a diferença que é necessário alterar border para rounded e “tamanho” por um dos prefixos “sm”, “md”, “lg”, “xl”, “2xl”, “3xl” ou “full”.

Contornos

O conceito de contorno é muito parecido com o de borda, com diferenças muito pontuais. A mais importante delas é que, ao contrário das bordas, os contornos não ocupam espaços do elemento, sendo eles construídos acima deles.

Aplicamos os conceitos de espessura, cor e estilo de maneira análoga ao que fizemos até aqui com bordas, com a diferença de que as estilizações para contornos são aplicadas para todos os lados do mesmo. Desta maneira, temos as estruturas resumidas a outline-{espessura}, outline-{cor} e outline-{estilo}:

Fácil demais, não acha? Agora que temos uma base para a estrutura das classes do Tailwind relacionadas a este tipo de estilização, aos poucos vamos nos familiarizando cada vez mais sobre como implementar mais e mais classes, utilizando as outras que já aprendemos como base. É importante apenas destacar que, para a espessura de um contorno, utilizamos os valores 0, 1, 2, 4 e 8. Para além de qualquer outro valor necessário, você pode criar novos valores da mesma forma que para as bordas, como por exemplo outline-[20px].

Além disso, para estilos, não existe uma classe outline-solid como existe para bordas. Para tal, basta utilizar a classe outline, sem nenhum outro prefixo, como foi feito no código da figura 12.

Por fim, existem classes que criam espaçamentos entre o limite do conteúdo e o contorno, que fica além dele. As classes que têm esta função possuem a estrutura outline-offset-{valor}, onde para valor podem ser atribuídos 0, 2, 4 e 8 (você também pode criar um valor adicional com a mesma lógica descrita no parágrafo anterior).

Utilizando border-none e outline-none

Diante de todas as informações já apresentadas, ainda não falei das classes border-none e outline-none. Deixei para o fim deste artigo com o intuito de, mediante todas as classes que vimos e que personalizam contornos e bordas, também fique o conhecimento de que em algum momento seja necessário removê-las. As classes border-none e outline-none, respectivamente, removem a borda e o contorno. Abaixo, há um exemplo de aplicação para estas classes:

Considerações finais

O Tailwind CSS é uma ferramenta muito fácil de se assimilar e, ao longo deste artigo, pude provar o quão fácil é aprender as estruturas das classes oferecidas e também personalizá-las. No mais, sugerimos que você pratique o máximo de bordas e contornos que puder para assentar o conteúdo.

Caso queira tirar quaisquer dúvidas ou somente trocar uma ideia sobre esses e mais assuntos de outra forma, você também pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn.

Bons estudos e até a próxima!