Fontes

O Tailwind CSS fornece uma coleção abrangente de classes utilitárias para controlar a tipografia diretamente no HTML, abrangendo propriedades essenciais como famílias de fontes, pesos (espessuras), estilos, transformações e decorações.

Com a transição para a arquitetura baseada em CSS nativo (CSS-first), o gerenciamento de tipografia ficou ainda mais integrado aos padrões modernos da web. O antigo arquivo de configuração tailwind.config.js foi substituído pelo uso de variáveis e diretivas declaradas diretamente na sua folha de estilo principal, otimizando o carregamento e a velocidade de compilação.

Famílias Tipográficas (font-*)

O Tailwind disponibiliza por padrão três famílias tipográficas principais que utilizam pilhas de fontes nativas do sistema operacional para garantir alta performance e legibilidade:

HTML

<p class="font-sans">Texto com fonte padrão sem serifa (sans)</p>
<p class="font-serif">Texto clássico com fonte com serifa (serif)</p>
<p class="font-mono">Texto técnico com fonte monoespaçada (mono)</p>

Peso da Fonte (font-{weight})

O controle da espessura tipográfica mapeia a propriedade nativa font-weight. Ela permite definir o contraste e a hierarquia visual do texto em diferentes intensidades:

HTML

<h2 class="font-bold text-slate-900">Título em Negrito Marcante</h2>
<p class="font-normal text-slate-600">Corpo de texto com peso regular para leitura confortável.</p>

Estilo e Postura do Texto

Para controlar a inclinação ou redefinir a postura padrão de uma fonte, utilize os utilitários de estilo:

• italic: Aplica a variante em itálico ao texto.

• not-italic: Remove o itálico (útil para anular o comportamento de tags como <em> ou <i> em contextos específicos).

HTML

<span class="italic text-indigo-600">Nota ou citação em itálico enfático</span>

Transformações Estruturais (case)

As transformações alteram a capitalização dos caracteres diretamente na renderização, mantendo o texto original intacto no banco de dados ou arquivos fonte:

• uppercase: Converte todos os caracteres para letras maiúsculas.

• lowercase: Converte todos os caracteres para letras minúsculas.

• capitalize: Transforma a primeira letra de cada palavra em maiúscula.

• normal-case: Remove qualquer transformação de caixa aplicada anteriormente por herança.

HTML

<span class="block text-xs font-semibold uppercase tracking-wider text-slate-400">
  Metadado ou Chapéu de Matéria
</span>

Decorações de Texto (underline / line-through)

Servem para aplicar ornamentos de linha sobre ou sob o texto, comuns em links ou marcações de preços alterados:

• underline: Aplica uma linha abaixo do texto (sublinhado).

• line-through: Aplica uma linha centralizada sobre o texto (rasurado/riscado).

• no-underline: Remove decorações de linha (ideal para resetar o estilo nativo de tags de link <a>).

HTML

<div class="flex items-center gap-2">
  <span class="text-sm text-slate-400 line-through">R$ 149,00</span>
  <span class="text-lg font-bold text-slate-900">R$ 99,00</span>
</div>

Customização e Fontes Personalizadas

Na arquitetura atual, se você precisar importar e utilizar uma fonte externa (como o Google Fonts ou arquivos locais de fontes), a configuração deve ser feita inteiramente dentro do seu arquivo CSS de entrada através da diretiva @theme. O Tailwind converterá essas definições em variáveis CSS nativas automaticamente.

CSS

/* src/input.css */
@import "tailwindcss";

@theme {
  /* Declarando novas famílias tipográficas */
  --font-display: "Bebas Neue", cursive;
  --font-body: "Open Sans", sans-serif;
}

O compilador processará o arquivo e disponibilizará os novos utilitários baseados nos nomes das variáveis (font-display e font-body) para uso imediato na camada estrutural da aplicação:

HTML

<h1 class="font-display text-4xl text-slate-900 tracking-tight">
  Título Principal com Fonte Display Customizada
</h1>
<p class="font-body text-base text-slate-600 leading-relaxed">
  Texto corrido estruturado com a fonte de leitura definida para o projeto.
</p>

A centralização da tipografia no CSS nativo elimina a dependência de APIs em JavaScript, deixando o código do seu template limpo e garantindo que o navegador renderize os textos com precisão e excelente velocidade de carregamento.