Pular para o conteúdo
1.6k

Tipografia

Recetas versáteis para títulos, texto do corpo, listas, tabelas e código embutido — com diagramação no estilo neobrutalista robusto.

Não incluímos nenhum estilo de tipografia por padrão. Esta página mostra como estilizar seu texto usando classes utilitárias.

Não há componente de tipografia para instalar — nada é fornecido por padrão. Cada seção abaixo é uma receita de classes utilitárias, pronta para copiar e colar, para um elemento HTML puro (h1–h4, p, blockquote, table, listas, código inline), apoiada nos tokens do tema para que os títulos saiam pesados e as bordas saiam grossas.

Quando usar:

  • Posts de blog e docs — mapeie a saída de MDX ou de um CMS para essas classes e obtenha um estilo consistente para texto longo.
  • Páginas de marketing — h1, Lead e Large cobrem o texto de hero sem um sistema separado de tipografia display.
  • Quando @tailwindcss/typography é exagero — copie só os elementos de que precisa em vez de puxar o plugin prose inteiro.

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">

table

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

Código em linha

@radix-ui/react-alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

Destaque

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-xl text-muted-foreground">

Grande

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}

Pequeno

Email address
export function TypographySmall() {
  return (
    <small className="text-sm leading-none font-medium">Email address</small>

Atenuado

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-sm text-muted-foreground">Enter your email address.</p>

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

Essas receitas estilizam elementos nativos, então a semântica já vem correta — mantenha-a assim. Escolha os níveis de título pela estrutura do documento, não pelo tamanho: leitores de tela navegam por nível, então, se um h2 parece grande demais, reestilize-o em vez de apelar para um h4. Dê às tabelas de dados uma linha de cabeçalho <th> para que as células continuem associadas às suas colunas, e reserve o blockquote para citações de verdade.