Tailwind

Tipografia com Tailwind - Parte I

Bruno Gabryell Cabral Da Silva

May 7, 2024 • 8 min read

Com o passar dos anos, tecnologias que facilitam a vida do programador foram ganhando mais e mais espaço. Dada a praticidade que o mundo mergulha a cada dia que passa, ferramentas que agilizam a nossa interação com o código, de fato, seriam consequência de nossas demandas e, hoje, dentre as que mais estão em alta, abordaremos o Tailwind CSS.

Como não é possível abordar todas as funcionalidades e classes do Tailwind em um único artigo, hoje aprenderemos parte das classes que implementam estilização de tipografia. Digo “parte das classes” porque dividiremos este assunto em mais de um artigo, tendo em vista o aperfeiçoamento do aprendizado, a fim de tratar minuciosamente certos conceitos que não podem ser repassados de qualquer jeito. Vamos lá?

Um pouco mais sobre o Tailwind CSS

Caso ainda não tenha ficado claro na introdução, o Tailwind foi criado com o intuito de ser uma forma mais prática de aplicar estilos css em um determinado projeto, sendo rapidamente abraçado pela comunidade e utilizado por muita gente nos dias atuais. Com ele, ao invés da estilização ser feita por classes repletas de atributos criados pelo programador, é disponibilizado um conjunto de classes arquitetadas no modelo atomic css, onde cada uma delas possui uma única função, como por exemplo transformar o estilo de um texto em itálico ou alinhá-lo à direita. 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 novas que o façam!

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind 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 background-image ou display) que é disponibilizado o nome da classe que atende à demanda e como utilizá-la.

Implementando o Tailwind CSS

Na documentação do Tailwind CSS existem diversas formas de instalá-lo, de acordo com a tecnologia que você está utilizando (existe uma série delas que o Tailwind possui compatibilidade). Siga o passo a passo da instalação correspondente clicando no botão Get started na tela principal.

Figura 1 - Guia de instalação do Tailwind na sua documentação.

Tipografia

Com o advento do avanço da tecnologia informacional, a tipografia deixou de abranger apenas a impressão de tipos de fontes de texto e passou a ser o estudo, criação, aplicação dos caracteres, estilos, formatos e arranjos visuais das palavras. Desta forma, quando digo que neste artigo trabalharemos as classes relacionadas à tipografia no Tailwind CSS, me refiro a classes que definem cores, tamanhos, estilos, espessuras e tudo mais que envolva estilizar textos e palavras. Sendo assim, vamos aos trabalhos!

Font Family

O atributo font-family do css se refere à definição de uma família de fontes das quais o texto de um elemento possuirá. Por padrão, possuímos três classes que fazem estas definições no Tailwind:

font-sans - Ao utilizar esta classe, o texto do elemento pertence à família de fontes “ui-sans-serif”, “system-ui”, “-apple-system”, “BlinkMacSystemFont”, "Segoe UI", “Roboto”, "Helvetica Neue", “Arial”, "Noto Sans", “sans-serif”, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" e "Noto Color Emoji";
font-serif - esta classe traz uma categoria diferente de fontes, em comparação a anterior: “ui-serif”, “Georgia”, “Cambria”, "Times New Roman", “Times” e “serif”;
font-mono - por fim, temos esta classe que implementa as seguintes fontes: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New e monospace.

Deixando um pouco da descrição e definição de lado, vamos ver a diferença na exibição das três classes:

Figura 2 - Utilizando as classes font-sans, font-serif e font-mono.

Figura 3 - Exibição das três classes existentes para Font Family.

É importante destacar que é possível criar novas classes com famílias de fontes que ainda não existem no Tailwind. No Tailwind.Config do seu projeto (que estará ou dentro de uma tag script, ou será um arquivo com o nome citado) você deve adicionar o objeto fontFamily e, após isto, 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á uma lista com os nomes das fontes que fazem parte a nova família, conforme a figura 4:

Figura 4 - Criando novas famílias de fontes, disponível em https://tailwindcss.com/docs/font-family.

Depois, é só mesclar a classe criada com o prefixo font-. No exemplo da Figura 4, para utilizar as famílias de fontes criadas, seria inserido no elemento a classe font-display ou font-body.

Chegou a hora de trabalharmos o tamanho das fontes que estamos utilizando. Existem diversas classes criadas pelo Tailwind com uma gama de tamanhos, onde recomendamos que sejam vistas de uma forma mais aprofundada na documentação (citar todas elas aqui só tornaria nossos estudos extensos e morosos). Mostraremos algumas delas no exemplo a seguir:

Figura 5 - Aplicando tamanhos de fontes diferentes para cada parágrafo.

Figura 6 - Exibição de cada parágrafo com um tamanho de fonte diferente.

OBS: Assim como para o Font Family, é possível adicionar novos tamanhos de fonte, caso nenhuma das classes existentes satisfaçam sua necessidade. Você deve adicionar o objeto fontSize e, após isso, 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 fonte que esta classe representa, conforme a figura 7:

Figura 7 - Criando novos tamanhos de fonte, disponível em https://tailwindcss.com/docs/font-size.

Depois, é só mesclar a classe criada com o prefixo text. No exemplo da Figura 4, para utilizar o tamanho 5xl, seria inserido no elemento a classe text-5xl.

Font Style

O Font Style do Tailwind é altamente simples: ele permite que você aplique ou não um efeito de itálico no elemento em questão. Para habilitar, basta adicionar a classe italic. Para desabilitar, utilize a classe not-italic:

Figura 8 - Criando um parágrafo onde o texto ficará itálico quando passarmos o mouse por cima do elemento.

Figura 9 - Código da Figura 8 em execução.

Font Weight

É possível também definir a espessura do texto de um elemento. Para este aspecto, o Tailwind fornece nove classes que vão da escala menor para a maior, conforme veremos no código a seguir:

Figura 10 - Aplicando as dez classes relacionadas à espessura de um texto.

Figura 11 - Código da Figura 10 em execução.

Font Variant Numeric

O atributo font-variant-numeric do css abarca todas as classes que têm como responsabilidade controlar as variantes de um número. Falando assim, é bem estranho mesmo, mas veremos quatro destas classes disponibilizadas pelo Tailwind e você entenderá a ideia:

normal-nums - é a classe padrão quando não utilizamos nenhuma classe de variação numérica, onde não há nenhuma variação específica para os numerais;
proportional-nums - todos os numerais passam a ter larguras completamente proporcionais;
tabular-nums - todos os numerais passam a ter larguras completamente uniformes;
diagonal-fractions - substitui números separados por barra por frações diagonais comuns.

Figura 12 - Utilizando quatro das nove variantes numéricas.

Figura 13 - Exibindo as diferenças entre cada uma das classe utilizadas.

OBS: Abordamos apenas quatro das principais classes de variantes numéricos, mas existe um total de nove delas. Todavia, muita atenção na hora de escolher a Font Family que irá utilizar, pois algumas delas não tem suporte para determinadas variantes.

Letter Spacing

O atributo do css letter-spacing define o espaçamento entre as letras de um texto de um elemento. Estão listadas todas as classes disponibilizadas pelo Tailwind para este fim na Figura 14, em ordem crescente, ou seja, da classe de menor espaçamento para a de maior:

Figura 14 - Utilizando todas as classes de espaçamento entre letras de um elemento.

Figura 15 - Código da Figura 14 em execução.

Line Height

O line-height define a altura entre as linhas de um texto de um elemento. Como existem mais de dez classes envolvidas nesta função, recomendamos que você leia a documentação para ver qual delas irá satisfazer a sua necessidade. Por aqui, utilizaremos três para exemplificar (leading-3, leading-5 e leading-10):

Figura 16 - Criando espaçamentos entre linhas com tamanhos diferentes.

Figura 17 - Código da Figura 16 em execução.

List Style Type

O list-style-type define o modelo de marcação que será utilizado em um ou mais tópicos, de forma que estas marcações podem não existir ( utilizamos a classe list-none para isso), ter formato de disco (com o uso da classe list-disc) ou serem enumerados (com a classe list-decimal). Veja:

Figura 18 - Definindo um estilo diferente para cada tópico da lista não ordenada.

Figura 19 - Código da Figura 18 em execução.

List Style Position

Para finalizar este primeiro artigo sobre tipografias (e não menos importante), temos o list-style-position, que define se um marcador fica dentro ou fora do corpo do texto (utilizamos list-inside em caso positivo e list-outside em caso negativo):

Figura 20 - Utilizando as classes **list-inside** e **list-outside** em tópicos diferentes.

Figura 21 - Código da Figura 20 em execução.

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 da Tipografia que aprendeu neste artigo e, logo mais, voltaremos com uma segunda parte onde aprenderemos ainda mais!

Caso queira tirar quaisquer dúvidas ou somente trocar uma ideia sobre esses e mais assuntos de outra forma, você pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn. Te espero ansiosamente! Bons estudos e até a próxima.

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.