Preset Tipografia

Fornece um conjunto de classes de prosa que você pode usar para adicionar padrões tipográficos ao HTML puro.

Código Fonte

Instalação

pnpm

pnpm add -D @unocss/preset-typography

yarn

yarn add -D @unocss/preset-typography

npm

npm install -D @unocss/preset-typography

bun

bun add -D @unocss/preset-typography

TIP

Este preset está incluído no pacote unocss, você também pode importá-lo de lá:

import { presetTypography } from 'unocss'

Uso

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // necessário ao usar modo attributify
    presetWind3(), // necessário
    presetTypography(),
  ],
})

Classes

<article class="text-base prose prose-truegray xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Algum texto</p>
</article>

Atributos

<article text-base prose prose-truegray xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Algum texto</p>
</article>

WARNING

Aviso: not-prose só pode ser usado como classe, não como atributo.

Destaques

Qualquer tamanho de fonte

Aplique qualquer tamanho de fonte para o corpo que você quiser e prose irá dimensionar os estilos para os respectivos elementos HTML. Por exemplo, prose text-lg tem tamanho de fonte do corpo 1.125rem e h1 será dimensionado com esse tamanho 2.25 vezes. Veja todos os elementos HTML suportados.

Qualquer cor

Aplique qualquer cor com prose-${colorName} do UnoCSS (ex. prose-coolgray, prose-sky) já que prose não tem nenhuma cor por padrão. Veja todas as cores disponíveis. Por exemplo, prose prose-truegray usará as respectivas cores para os respectivos elementos HTML.

Modo escuro com um único utilitário

Aplique modo escuro tipográfico com prose-invert (cor de fundo precisa ser tratada pelos usuários). Por exemplo, prose dark:prose-invert usará as cores invertidas no modo escuro.

Seu próprio estilo

Os estilos dos elementos fora do prose permanecerão os mesmos. Sem reset de estilo assim como o UnoCSS.

Desfazer com utilitário not

Aplique not-prose aos elementos para desfazer os estilos tipográficos. Por exemplo, <table class="not-prose"> irá pular os estilos deste preset para o elemento table (NOTA: o utilitário not só pode ser usado em classe já que é usado apenas no seletor CSS & não é escaneado pelo UnoCSS).

Opções de compatibilidade

Este preset usa algumas pseudo-classes que não são amplamente suportadas, mas você pode desabilitá-las. (#2064)

• Se você habilitar noColonNot ou noColonWhere, not-prose ficará indisponível.
• Se você habilitar noColonIs, o modo attributify terá um comportamento incorreto.

Utilitários

Regra	Estilos por esta regra
prose	Veja no GitHub.

Cores

Regras (cor)
prose-rose
prose-pink
prose-fuchsia
prose-purple
prose-violet
prose-indigo
prose-blue
prose-sky
prose-cyan
prose-teal
prose-emerald
prose-green
prose-lime
prose-yellow
prose-amber
prose-orange
prose-red
prose-gray
prose-slate
prose-zinc
prose-neutral
prose-stone

Opções

Este preset tem configurações selectorName e cssExtend para usuários que gostam de sobrescrever ou estender.

TIP

As declarações CSS passadas para cssExtend irão

• sobrescrever os estilos internos se os valores estiverem em conflito, caso contrário
• ser mescladas profundamente com os estilos internos.

selectorName

• Tipo: string
• Padrão: prose

O nome da classe para usar os utilitários tipográficos. Para desfazer os estilos dos elementos, use como not-${selectorName} que por padrão é not-prose.

TIP

O utilitário not só está disponível em classe.

cssExtend

• Tipo: Record<string, CSSObject>
• Padrão: undefined

Estender ou sobrescrever seletores CSS com bloco de declaração CSS.

compatibility

• Tipo: TypographyCompatibilityOptions
• Padrão: undefined

Veja Opções de compatibilidade.

WARNING

Observe que isso afetará alguns recursos.

interface TypographyCompatibilityOptions {
  noColonWhere?: boolean
  noColonIs?: boolean
  noColonNot?: boolean
}

Exemplo

import { presetTypography } from '@unocss/preset-typography'
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // necessário se estiver usando modo attributify
    presetWind3(), // necessário
    presetTypography({
      selectorName: 'markdown', // agora use como `markdown markdown-gray`, `not-markdown`
      // cssExtend é um objeto com seletor CSS como chave e
      // bloco de declaração CSS como valor como escrever CSS normal.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Agradecimentos

• Tailwind CSS Typography
• Windi CSS Typography