Tamanhos de Fonte

O Tailwind CSS oferece uma escala tipográfica bem definida por meio das classes text-{size}. Essas classes aplicam tamanhos de fonte consistentes e responsivos, permitindo estabelecer hierarquias visuais claras com pouco esforço.

Escala padrão de tamanhos #

A escala segue um padrão de nomenclatura simples, com valores que crescem progressivamente.

| Classe | Tamanho (rem) | Exemplo visual | | ----------- | ----------------- | --------------- | | text-xs | 0.75rem (12px) | Pequeno | | text-sm | 0.875rem (14px) | Menor padrão | | text-base | 1rem (16px) | Tamanho padrão | | text-lg | 1.125rem (18px) | Levemente maior | | text-xl | 1.25rem (20px) | Título leve | | text-2xl | 1.5rem (24px) | Subtítulo | | text-3xl | 1.875rem (30px) | Destaque | | text-4xl | 2.25rem (36px) | Cabeçalho | | text-5xl | 3rem (48px) | Grande | | text-6xl | 3.75rem (60px) | Muito grande | | text-7xl | 4.5rem (72px) | Gigante | | text-8xl | 6rem (96px) | Extra grande | | text-9xl | 8rem (128px) | Máximo |

Exemplos de uso #

<h1 class="text-4xl font-bold">Título principal</h1>
<h2 class="text-2xl text-gray-700">Subtítulo</h2>
<p class="text-base text-gray-600 mt-4">Texto padrão de parágrafo com leitura confortável.</p>

Tamanhos responsivos #

Você pode adaptar os tamanhos de fonte conforme o dispositivo usando os prefixos de breakpoint:

<h1 class="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-bold">
  Título responsivo
</h1>

Esse título começa pequeno no mobile e cresce em telas maiores, mantendo a hierarquia visual sem necessidade de media queries manuais.

Personalização no tailwind.config.js #

A escala de tamanhos pode ser estendida ou sobrescrita:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'tiny': '0.625rem', // 10px
        'huge': '10rem',    // 160px
      }
    }
  }
}

O controle de tamanhos de fonte no Tailwind é simples e altamente adaptável, permitindo criar layouts responsivos com hierarquia textual bem definida.