Tipografia com Tailwind - Parte II

Saudações, caro leitor! Estamos de volta, com mais conteúdo e aprendizado, envolvendo classes de tipografia em Tailwind! Na última vez que nos encontramos, você aprendeu os conceitos básicos de tamanho, estilo, espaçamento entre letras, espessura e família de fontes.

No artigo de hoje, continuaremos os nossos estudos explorando esta área e, visando o melhor aprendizado possível, recomendamos como base a leitura do artigo anterior, que aborda alguns conceitos que utilizaremos aqui, caso haja qualquer dúvida.

Text Align

Podemos definir em qual direção o nosso texto será alinhado horizontalmente. Para isso, utilizamos uma das classes abaixo:

• text-left - alinha o texto à esquerda;
• text-right - alinhamento à direita;
• text-center - o texto é alinhado ao centro;
• text-justify - o texto é alinhado de forma justificada;
• text-start - alinha o texto no início do elemento;
• text-end - o texto é alinhado ao fim do elemento.
  

Text Color

Agora, iremos aprender a definir uma cor para o texto 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 (uma cor 900 é mais escura que uma 100). Utilizamos estas classes por meio da seguinte notação:

text-{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 text-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 uma cor para cada texto?

Text Decoration

O atributo text-decoration do css é utilizado para aplicar uma determinada decoração sobre o texto de um elemento. O Tailwind nos fornece quatro classes onde podemos personalizar os textos sob este conceito:

• underline - será criada uma linha abaixo do texto de um elemento;
• overline - a linha será criada acima do texto de um elemento;
• line-through - cria uma linha no meio do texto de um elemento;
• no-underline - nenhuma linha será criada.
  

Vamos ver um exemplo onde essas classes serão aplicadas. No hover de cada um dos textos aplicamos um efeito que remove as decorações com o uso da classe no-underline:

Text Decoration Color

Observe novamente a Figura 6. Você percebeu que a cor das linhas criadas pelas classes Tailwind para o atributo text-decoration acompanharam as cores da fonte? Mas e se quiséssemos que a linha tivesse uma cor diferente da do texto? Bem, para isto, o Tailwind nos disponibiliza um conjunto de classes que tem relação direta com o atributo text-decoration-color, que define uma cor para a decoração que criamos.

A estrutura das classes que alteram a cor de uma decoração funciona de maneira análoga a explicação do Text Color, com a exceção de que, ao invés do prefixo text, utilizaremos decoration, da seguinte forma:

decoration-{cor}-{100-900}

Text Decoration Style

Não bastando tudo isso, ainda é possível personalizar a decoração que você aplica no texto de um elemento. Existem cinco classes criadas pelo Tailwind com este intuito:

• decoration-solid - cria uma linha simples e é o comportamento padrão de uma decoração, caso não seja utilizada nenhuma das outras classes seguintes;
• decoration-double - são criadas duas linhas ao invés de apenas uma;
• decoration-dotted - as linhas terão um efeito pontilhado;
• decoration-dashed - as linhas terão um efeito tracejado;
• decoration-wavy - aplica um efeito ondulado na linha.
  

Text Decoration Thickness

O atributo text-decoration-thickness permite que possamos definir qual a espessura da linha de decoração que foi criada. Existem sete classes criadas pelo Tailwind que tem este objetivo. Desta forma, utilizaremos algumas destas classes no exemplo a seguir para que você note a diferença entre elas (lembre-se que, em qualquer dúvida ou curiosidade para ver todas as classes, consulte a documentação).

Observação: Se a espessura criada pelas classes disponibilizadas pelo Tailwind não satisfaz a sua necessidade, é possível criar novas espessuras alterando o Tailwind.Config. Dentro do objeto extends que está incluso no objeto theme, você deve criar um novo objeto chamado textDecorationThickness e, nele, criar um conjunto de chave e valor para a nova classe a ser criada, onde a chave será o nome da classe e o valor será o tamanho da espessura desejada, conforme a figura 4:

Depois, é só mesclar a especificação criada com o prefixo decoration-. No exemplo da Figura 13, seria inserido no elemento a classe decoration-3.

Text Underline Offset

Podemos definir a distância entre a decoração criada e o texto de um elemento com o atributo text-underline-offset do css. Veja algumas das classes do Tailwind que possuem esta finalidade:

Assim como para Text Decoration Thickness, podemos criar novas classes que manipulam a distância entre uma decoração e um texto. A diferença é que, ao invés de criar um objeto chamado textDecorationThickness, criamos um objeto com o nome textUnderlineOffset, conforme na Figura 16:

Depois, é só mesclar a especificação criada com o prefixo underline-offset-. No exemplo da Figura 16, seria inserido no elemento a classe underline-offset-3.

Text Transform

O atributo do css chamado text-transform permite que realizemos algumas manipulações no texto, como deixá-lo completamente em maiúsculo, por exemplo. Como é de se esperar, o Tailwind também possui classes com o objetivo de disponibilizar a manipulação deste atributo:

• normal-case - não será aplicado nenhum efeito de transformação no texto: este é o comportamento padrão do atributo “text-transform”, caso nenhuma das classes seguintes sejam utilizadas;
• uppercase - transforma todo o texto de um elemento em maiúsculo;
• lowercase - todo o texto de um elemento será minúsculo;
• capitalize - a primeira letra de cada palavra ficará em maiúsculo.
  

Text Indent

Utilizamos o atributo do css text-indent para definir o tamanho do espaço vazio antes de um texto em um determinado elemento. O Tailwind possui diversas classes para este fim (consulte a documentação para ver todas elas), dentre as quais utilizaremos algumas para fins de exemplificação:

Também é possível criar novos tamanhos para as indentações, caso nenhuma se enquadre na sua necessidade. No Tailwind.Config, dentro do objeto extends que está incluso no objeto theme, você deve criar um novo objeto chamado spacing e, nele, criar um conjunto de chave e valor para a nova classe a ser criada, onde a chave será o nome da classe e o valor será o tamanho desejado, conforme a figura 21:

Depois, é só mesclar a especificação criada com o prefixo indent-. No exemplo da Figura 21, seria inserido no elemento a classe indent-128.

Word Break

O atributo word-break é responsável por definir o comportamento de determinada palavra que exceda o tamanho de um elemento. Vejamos algumas das classes Tailwind responsáveis por esta função:

• break-normal - aplica quebras de linha apenas entre espaços e não em uma palavra;
• break-words - quebra uma linha no meio de uma palavra, quando necessário;
• break-all - quebra linhas sempre que necessário, sem tentar preservar palavras inteiras.
  

Considerações finais

Chegamos ao fim de uma grande jornada, onde detalhamos a Tipografia do CSS aplicado ao Tailwind. Depois de ler os dois artigos que envolvem este conceito, você aprendeu como utilizar as funcionalidades principais aplicadas a este framework, sendo capaz de fazer coisas incríveis a partir de agora.

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ê 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!