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.

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.