No Tailwind CSS, a tipografia é controlada por um conjunto de utilitárias que definem propriedades como fonte, tamanho, peso, espaçamento entre linhas, alinhamento e outras características visuais do texto.
Essas utilitárias seguem convenções claras e escalas bem definidas, o que facilita a aplicação de estilos consistentes e responsivos ao conteúdo textual.
Organização da tipografia no Tailwind
A tipografia é dividida em várias categorias de controle:
-
font-*: tipo da fonte (sans, serif, mono) -
text-*: tamanho da fonte -
font-weight: espessura do texto -
leading-*: espaçamento entre linhas -
tracking-*: espaçamento entre letras -
text-left / center / right / justify: alinhamento -
italic,not-italic,underline,line-through, etc.
Controle responsivo
As utilitárias tipográficas podem ser combinadas com breakpoints responsivos para adaptar a leitura em diferentes tamanhos de tela:
<h1 class="text-xl sm:text-2xl lg:text-4xl font-bold">
Título responsivo
</h1>
Subpáginas desta seção
➤ Fontes
Explica como aplicar famílias tipográficas (sans, serif, mono), alterar peso da fonte (font-light, font-bold, etc.) e usar estilos como italic, uppercase, underline.
➤ Tamanhos
Apresenta a escala de tamanhos disponíveis no Tailwind (text-xs até text-9xl), com exemplos práticos e dicas de responsividade.
Essas utilitárias oferecem controle total sobre a apresentação do conteúdo textual, ajudando a criar interfaces bem estruturadas, com foco em legibilidade e hierarquia visual clara.