TailwindCSS Brasil
Entrar
Docs

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:

<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:

| Classe | Peso CSS | | ----------------- | ------------ | | font-thin | 100 | | font-extralight | 200 | | font-light | 300 | | font-normal | 400 (padrão) | | font-medium | 500 | | font-semibold | 600 | | font-bold | 700 | | font-extrabold | 800 | | font-black | 900 |

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

Estilo do texto #

Itálico e normal #

<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

<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

<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:

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

E aplicar no HTML:

<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.

AnteriorFlexPróximo Gap