Tipografia no Tailwind: fonte, tamanho, peso e prose

Tipografia no Tailwind combina famílias de classes: text-* define tamanho ou cor conforme o sufixo, font-* escolhe família ou peso, leading-* controla a altura da linha e tracking-* controla o espaço entre letras. O segredo é alterar uma dimensão por vez para não perder a causa do resultado.

O domínio é o guia de cuidados da clínica. Ele tem título curto, parágrafo longo, lista e link. Você vai construir a hierarquia e só depois decidir se o plugin prose vale o custo.

Tamanho e altura de linha chegam em par

text-3xl aponta para tokens de tamanho e line-height. Isso evita que um título grande herde a altura apertada de outro contexto.

<h1 class="text-3xl font-bold">Cuidados depois da consulta</h1>

O CLI emitiu:

A variável --tw-leading permite que uma classe posterior substitua apenas a altura. Essa flexibilidade também cria um erro: colocar leading-none num título que quebra em duas linhas pode fazer as letras quase se encostarem.

Fonte da marca nasce no tema

Na v4, você declara a família em @theme. O prefixo --font-* cria a classe de mesmo nome.

@import "tailwindcss";

@theme {
  --font-display: "Archivo", sans-serif;
}

<h1 class="font-display text-3xl font-bold">Patinha Feliz</h1>

Carregar o arquivo da fonte é outra responsabilidade. Um token não baixa Archivo da internet. Sirva a fonte localmente ou importe-a antes do Tailwind, e mantenha uma família de fallback para o texto continuar legível.

Peso, tracking e o efeito acumulado

font-bold usa o token de peso; tracking-tight reduz o espaçamento entre letras. Eles costumam funcionar em títulos, mas não devem virar padrão de todo parágrafo.

<h2 class="font-bold tracking-tight">Agenda da semana</h2>
<p class="font-normal tracking-normal">Confirme os horários abaixo.</p>

No teste, tracking-tight escreveu letter-spacing e font-bold escreveu font-weight. São propriedades independentes. Se a fonte carregada não possui o peso 700, o navegador pode sintetizar um negrito; isso é comportamento da fonte, não falha do Tailwind.

leading-* é parte do ritmo vertical

Para texto de leitura, leading-7 dá espaço entre linhas. O valor medido veio da mesma régua de spacing:

<p class="max-w-prose text-base leading-7 text-slate-600">
  Ofereça água e observe o comportamento do animal nas próximas horas.
</p>

max-w-prose limita a linha a 65ch. Altura confortável não corrige uma linha que atravessa a tela inteira; largura e leading trabalham juntas. A lição de espaçamento no Tailwind explica a régua que os dois compartilham.

Quebra equilibrada serve para títulos, não para tudo

text-balance tenta distribuir as palavras entre linhas de título. O CSS gerado usa a propriedade nativa text-wrap.

<h1 class="max-w-lg text-3xl font-bold text-balance">
  Como preparar seu animal para a primeira consulta
</h1>

Use text-pretty em parágrafos quando quiser reduzir uma palavra órfã no final. Não aplique balance a blocos longos: o navegador precisa reorganizar mais linhas e o resultado pode parecer artificial.

Truncar é esconder conteúdo

truncate reúne overflow oculto, espaço em branco sem quebra e reticências. Serve em uma célula que possui alternativa para revelar o nome completo.

<span class="block max-w-48 truncate" title="Clínica Veterinária Patinha Feliz">
  Clínica Veterinária Patinha Feliz
</span>

Um title não é solução universal para toque e teclado. Em dados importantes, permita quebra ou ofereça um controle acessível. line-clamp-2 também corta; ele não resume o texto.

O Preflight remove estilos que você talvez esperasse

Listas, títulos e links chegam sem a aparência padrão do navegador porque o Preflight normaliza a base. Este HTML fica semanticamente correto, mas não ganha bolinhas e sublinhado sozinho:

<ul class="list-disc pl-6">
  <li>Levar a carteirinha de vacinação</li>
  <li>Informar medicamentos em uso</li>
</ul>
<a class="font-medium text-cyan-700 underline" href="#agenda">Agendar</a>

O erro não é “Tailwind apagou a semântica”. A semântica permanece; a apresentação inicial foi zerada. Você precisa restaurar sinais visuais, em especial o foco e o aspecto de link.

prose é um componente tipográfico de conteúdo

O plugin oficial typography estiliza HTML que você não controla linha por linha, como Markdown de um CMS. Na v4, carregue o plugin no CSS:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

<article class="prose prose-slate lg:prose-lg">
  <h1>Cuidados com seu pet</h1>
  <p>Um guia curto para a primeira consulta.</p>
</article>

Com esse conteúdo mínimo, o arquivo compilado medido teve 24.512 bytes crus e 3.770 bytes em gzip. O número inclui tema e Preflight, portanto não é o “peso puro do plugin”. Ele é uma medição de bundle final reproduzível, não propaganda.

Evite prose numa barra, formulário ou dashboard. Ali você controla cada elemento e a opinião tipográfica do plugin cria uma briga desnecessária. Dentro de um artigo, customize por variáveis e modificadores documentados antes de escrever dezenas de seletores de correção.

Erro reproduzido: estilo de corpo não declarado

O nome text-corpo só funciona depois que o tema publica o token correspondente. Sem ele, o teste real com o CLI 4.3.3 falha:

@import "tailwindcss";
.qa { @apply text-corpo; }

printf '@import "tailwindcss"; .qa { @apply text-corpo; }\n' | npx @tailwindcss/cli@4.3.3 -i - -o /dev/null

O processo encerrou com código 1. Use uma classe tipográfica existente ou defina o token com tamanho e altura de linha coerentes no tema.

Missão de leitura real

Monte uma orientação com título text-3xl, parágrafo max-w-prose leading-7, lista com marcadores e link sublinhado com foco visível. Teste a 320px e 1024px. A missão termina quando nenhuma informação depende de truncamento e o título não deixa uma palavra sozinha. Depois conecte família, cor e escala em @theme no Tailwind v4, ou volte ao guia de Tailwind para enxergar a sequência completa.

Revise a hierarquia sem olhar as classes

Afaste-se da tela e identifique título, apoio, corpo, metadado e ação. Se dois níveis parecem iguais, não comece aumentando tudo. Escolha uma dimensão principal para separá-los — tamanho, peso, cor ou espaço — e preserve as outras. Hierarquia baseada em cinco diferenças simultâneas fica difícil de manter.

Troque o conteúdo por uma frase longa e aumente o zoom. Verifique se o título continua formando um bloco coerente, se o parágrafo não atravessa uma linha excessiva e se link continua reconhecível sem depender só de cor. Faça também o teste com a fonte de fallback: carregamento pode atrasar ou falhar, e o layout não deve colapsar.

Por último, abra o CSS gerado e confirme que uma classe de texto representa a propriedade imaginada. text-* pode significar tamanho ou cor conforme o sufixo; autocomplete ajuda, mas o resultado compilado encerra a dúvida. Essa leitura é a ponte entre a utility e a tipografia em CSS, que continua governando legibilidade por baixo do framework.