Capítulo 70 de 108

Typography

Core Idea

shadcn/ui não fornece componentes de tipografia nem CSS global de estilos de texto — esta página é uma referência de classes utilitárias Tailwind para replicar consistentemente headings, parágrafos, listas, tabelas e variações de texto (lead, muted, small).

Key Concepts

  • Sem componente real: cada exemplo (h1, p, blockquote...) é um elemento HTML nativo com uma combinação específica de classes Tailwind — não há import de Typography ou similar.
  • scroll-m-20: padrão em todos os headings para compensar navbar fixa em scroll-to-anchor (#heading).
  • [&:not(:first-child)]:mt-6: padrão em <p> para adicionar margem superior apenas entre parágrafos consecutivos, não antes do primeiro.
  • text-balance: usado em h1 para balancear quebras de linha em títulos longos.

Code Examples

<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
  Taxing Laughter: The Joke Tax Chronicles
</h1>
<p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
  Once upon a time...
</p>
  • O que demonstra: heading principal + parágrafo de abertura ("lead"), com text-muted-foreground para hierarquia visual.
<h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
  The King's Plan
</h2>
  • O que demonstra: h2 com borda inferior (comum em docs) e first:mt-0 para não gerar margem extra quando é o primeiro elemento.
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
  @radix-ui/react-alert-dialog
</code>
  • O que demonstra: código inline estilizado sem componente Code dedicado.

Reference Tables

ElementoClasses principais
h1scroll-m-20 text-4xl font-extrabold tracking-tight text-balance
h2scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0
h3scroll-m-20 text-2xl font-semibold tracking-tight
h4scroll-m-20 text-xl font-semibold tracking-tight
pleading-7 [&:not(:first-child)]:mt-6
blockquotemt-6 border-l-2 pl-6 italic (RTL: border-s-2 ps-6)
list (ul)my-6 ml-6 list-disc [&>li]:mt-2
inline coderounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold
leadtext-xl text-muted-foreground
largetext-lg font-semibold
smalltext-sm leading-none font-medium
mutedtext-sm text-muted-foreground

Anti-patterns

  • Criar um componente <Typography variant="h1"> genérico esperando encontrar suporte oficial: shadcn/ui deliberadamente não oferece isso; a prática recomendada é copiar as classes diretamente nos elementos HTML.
  • Usar mt-6 fixo em todo <p>: quebra o primeiro parágrafo de uma seção; usar sempre [&:not(:first-child)]:mt-6.

Key Takeaways

  1. Typography é puramente uma referência de classes Tailwind, não um componente — não existe npx shadcn add typography funcional além de copiar snippets.
  2. Cada variante (h1-h4, p, blockquote, list, code, lead, large, small, muted) tem uma combinação de classes fixa e reutilizável.
  3. text-muted-foreground é o padrão para texto secundário/lead/small em toda a hierarquia tipográfica.
  4. RTL exige trocar pl-*/ml-* por ps-*/ms-* (padrão lógico) em blockquote e listas.

Connects To

  • Todos os demais componentes: as classes de Typography são a base de texto reutilizada em CardTitle, ItemTitle, EmptyTitle, etc.
AnteriorAspect RatioPróximoItem