Fontes

O Tailwind CSS fornece classes utilitárias para definir famílias de fonte, peso (espessura), estilo (itálico), transformação de texto e decoração, de forma simples e direta no HTML.

Essas classes ajudam a construir uma hierarquia tipográfica clara e responsiva com controle total sobre o texto.

---

Famílias tipográficas (font-*)

As classes font-sans, font-serif e font-mono aplicam famílias tipográficas base:

Copy<p class="font-sans">Texto com fonte sem serifa (sans)</p>
<p class="font-serif">Texto com fonte com serifa (serif)</p>
<p class="font-mono">Texto com fonte monoespaçada (mono)</p>

A configuração padrão pode ser personalizada no tailwind.config.js.

---

Peso da fonte (font-{weight})

Controla a espessura do texto. Disponível em diferentes intensidades:

Copy<p class="font-semibold">Texto em negrito médio</p>

---

Estilo do texto

Itálico e normal

Copy<p class="italic">Texto em itálico</p>
<p class="not-italic">Texto normal</p>

---

Transformações de texto

• uppercase: transforma o texto em letras maiúsculas

• lowercase: letras minúsculas

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

• normal-case: remove qualquer transformação

Copy<p class="uppercase tracking-wider">Texto transformado</p>

---

Decoração de texto

• underline: sublinha o texto

• line-through: risco sobre o texto

• no-underline: remove sublinhado

Copy<p class="underline">Texto sublinhado</p>
<p class="line-through">Texto riscado</p>

---

Estilo de fonte personalizado

Você pode estender ou substituir as famílias de fonte no tailwind.config.js:

Copymodule.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Bebas Neue"', 'cursive'],
        body: ['"Open Sans"', 'sans-serif'],
      }
    }
  }
}

E aplicar no HTML:

Copy<h1 class="font-display text-3xl">Título com fonte personalizada</h1>

---

As classes de fonte do Tailwind oferecem controle refinado da aparência do texto sem sair do HTML.