Preset de Tipografía

Proporciona un conjunto de clases de prosa que puedes usar para añadir valores predeterminados tipográficos a HTML vanilla.

Código Fuente

Instalación

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á incluido en el paquete unocss, también puedes importarlo desde ahí:

import { presetTypography } from 'unocss'

Uso

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

export default defineConfig({
  presets: [
    presetAttributify(), // requerido si usas modo attributify
    presetWind3(), // requerido
    presetTypography(),
  ],
})

Clases

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

Atributos

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

WARNING

Nota: not-prose solo puede usarse como clase, no como atributo.

Destacados

Cualquier tamaño de fuente

Aplica cualquier tamaño de fuente para el cuerpo que te guste y prose escalará los estilos para los respectivos elementos HTML. Por ejemplo, prose text-lg tiene tamaño de fuente de cuerpo 1.125rem y h1 escalará con ese tamaño 2.25 veces. Consulta todos los elementos HTML soportados.

Cualquier color

Aplica cualquier color con prose-${colorName} por UnoCSS (ej. prose-coolgray, prose-sky) ya que prose no tiene ningún color por defecto. Consulta todos los colores disponibles. Por ejemplo, prose prose-truegray usará los respectivos colores para los respectivos elementos HTML.

Modo oscuro con una sola utilidad

Aplica modo oscuro tipográfico con prose-invert (el color de fondo necesita ser manejado por los usuarios). Por ejemplo, prose dark:prose-invert usará los colores invertidos en el modo oscuro.

Tu propio estilo

Los estilos de elementos no dentro de prose permanecerán igual. Sin restablecimiento de estilos, igual que UnoCSS.

Deshacer con la utilidad not

Aplica not-prose a los elementos para deshacer los estilos tipográficos. Por ejemplo, <table class="not-prose"> omitirá los estilos de este preset para el elemento table (NOTA: la utilidad not solo es usable en clase ya que solo se usa en selector CSS y no es escaneada por UnoCSS).

Opciones de compatibilidad

Este preset usa algunas pseudo-clases que no son ampliamente soportadas, pero puedes deshabilitarlas. (#2064)

• Si habilitas noColonNot o noColonWhere, not-prose no estará disponible.
• Si habilitas noColonIs, el modo attributify tendrá un comportamiento incorrecto.

Utilidades

Regla	Estilos por esta regla
prose	Consulta en GitHub.

Colores

Reglas (color)
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

Opciones

Este preset tiene configuraciones selectorName y cssExtend para usuarios que les gusta sobrescribir o extender.

TIP

Las declaraciones CSS pasadas a cssExtend:

• sobrescribirán los estilos integrados si los valores son conflictivos, de lo contrario
• se fusionarán profundamente con los estilos integrados.

selectorName

• Tipo: string
• Predeterminado: prose

El nombre de clase para usar las utilidades tipográficas. Para deshacer los estilos a los elementos, úsalo como not-${selectorName} que por defecto es not-prose.

TIP

La utilidad not solo está disponible en clase.

cssExtend

• Tipo: Record<string, CSSObject>
• Predeterminado: undefined

Extender o sobrescribir selectores CSS con bloque de declaración CSS.

compatibility

• Tipo: TypographyCompatibilityOptions
• Predeterminado: undefined

Consulta Opciones de compatibilidad.

WARNING

Ten en cuenta que afectará algunas funciones.

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

Ejemplo

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

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetWind3(), // required
    presetTypography({
      selectorName: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
      // cssExtend is an object with CSS selector as key and
      // CSS declaration block as value like writing normal CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Reconocimiento

• Tailwind CSS Typography
• Windi CSS Typography