Tipografia no Tailwind

Em Tailwind CSS, a tipografia é gerenciada por um sistema robusto de classes utilitárias, permitindo controle preciso sobre fonte, tamanho, peso, espaçamento e alinhamento do texto. A grande inovação na v4 é a abordagem "CSS-First" para a configuração do seu design system, incluindo a tipografia. Agora, você define suas escalas e famílias de fontes diretamente no seu arquivo CSS principal usando a diretiva @theme, garantindo consistência e alinhamento com os padrões modernos da web.

Fundamentos da Tipografia

O Tailwind CSS v4 oferece um conjunto abrangente de classes utilitárias para controlar cada aspecto da tipografia:

font-*: Define a família tipográfica (ex: font-sans, font-serif, font-mono).
text-*: Controla o tamanho da fonte (ex: text-sm, text-base, text-lg).
font-* (peso): Ajusta a espessura do texto (ex: font-light, font-normal, font-bold).
leading-*: Gerencia o espaçamento entre linhas (line-height).
tracking-*: Define o espaçamento entre letras (letter-spacing).
text-left, text-center, text-right, text-justify: Alinhamento do texto.
Estilos e Decorações: Inclui classes como italic, not-italic, underline, line-through, uppercase, lowercase, capitalize.

Configuração CSS-First com `@theme`

A grande mudança na v4 é a forma como você define e estende o seu design system tipográfico. Em vez de um arquivo de configuração JavaScript, todas as personalizações são feitas diretamente no seu arquivo CSS principal usando a diretiva @theme.

Isso permite que você declare suas famílias de fontes, tamanhos e outros tokens tipográficos de forma nativa no CSS, aproveitando as capacidades do Lightning CSS para uma compilação otimizada.

@import "tailwindcss";

@theme {
--font-sans: "Inter", sans-serif;
--font-serif: "Merriweather", serif;
--text-base: 1rem;
--text-lg: 1.125rem;
--leading-normal: 1.5;
}

Com essa abordagem, o Tailwind v4 detecta automaticamente suas definições de tema e as transforma em classes utilitárias correspondentes.

Controle Responsivo

As classes tipográficas do Tailwind CSS v4 são totalmente compatíveis com o sistema de breakpoints responsivos, permitindo que você adapte a apresentação do texto para diferentes tamanhos de tela. Basta prefixar as classes com o breakpoint desejado (ex: sm:, md:, lg:).

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

Detalhes dos Utilitários Tipográficos

Famílias e Pesos de Fonte

Utilize as classes font-sans, font-serif e font-mono para aplicar as famílias de fontes padrão ou as que você definiu via @theme. O peso da fonte é controlado por classes como font-light, font-normal, font-medium, font-bold, entre outras, permitindo uma hierarquia visual clara.

 
<p class="font-sans font-bold">Texto em negrito e sans-serif</p>
<p class="font-serif font-light">Texto leve e serifado</p>

Tamanhos de Fonte

O Tailwind oferece uma escala de tamanhos de fonte pré-definida, que pode ser estendida ou modificada com @theme. As classes variam de text-xs a text-9xl, cobrindo uma vasta gama de necessidades. Para tamanhos arbitrários, você pode usar a sintaxe text-[valor], aproveitando a capacidade de utilitários dinâmicos da v4.

 
 
<p class="text-sm">Pequeno</p>
<p class="text-base">Base</p>
<p class="text-xl">Extra Grande</p>
<p class="text-[2.5rem]">Tamanho arbitrário</p>

Espaçamento, Alinhamento e Estilos

Controle o espaçamento entre linhas com leading-* (ex: leading-tight, leading-normal, leading-loose) e o espaçamento entre letras com tracking-* (ex: tracking-tight, tracking-normal, tracking-wide). O alinhamento é feito com text-left, text-center, text-right e text-justify. Para estilos visuais, utilize italic, underline, line-through, uppercase, lowercase e capitalize.

 
<p class="leading-relaxed tracking-wide text-center italic">
  Texto com espaçamento relaxado, letras largas, centralizado e itálico.
</p>

Conclusão

Com a abordagem "CSS-First" e o poder do Lightning CSS, o Tailwind CSS v4 eleva o controle tipográfico a um novo patamar. As classes utilitárias, combinadas com a flexibilidade de personalização via @theme e a capacidade de utilitários dinâmicos, garantem que você possa construir interfaces com tipografia precisa, responsiva e otimizada para a web moderna, focando na legibilidade e na hierarquia visual.

Tipografia