Complemento de tipografía

@tailwindcss/typography es un port 1:1 del complemento oficial de tipografía de PHP. Añade la clase prose y sus modificadores, que aplican valores tipográficos legibles a un bloque de HTML renderizado —encabezados, párrafos, listas, citas en bloque, código, tablas y más— sin tener que estilizar cada elemento a mano.

Uso

Carga el complemento con @plugin e importa la capa de utilidades; luego aplica prose al contenedor que envuelve el contenido:

use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);

La regla .prose generada define --tw-prose-* propiedades personalizadas (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes y otras) y aplica estilos a los elementos descendientes mediante ellas.

Clases

Tamaños

Los modificadores de tamaño escalan toda la escala tipográfica. Se aplican junto con la clase base prose:

<article class="prose prose-xl">…</article>

Temas de color

Los modificadores de color cambian la escala de grises que se usa para el texto del cuerpo, los encabezados y los bordes:

Invertir

prose-invert invierte la paleta de colores para usarla sobre fondos oscuros. Combínala libremente con modificadores de tamaño y color:

<article class="prose prose-lg prose-slate prose-invert">…</article>

Opciones

className

De forma predeterminada, el complemento genera la clase prose. Define className para cambiarle el nombre; los modificadores adoptan el nuevo nombre (markdown, markdown-lg, markdown-invert, …). Si se define, no se generan las clases prose:

$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);

Notas

Los modificadores de elementos, como prose-headings:underline o prose-a:text-blue-600, están registrados, pero en la versión actual se compilan sin su selector de elemento, por lo que la utilidad se aplica a todo el contenedor prose en lugar de aplicarse a los encabezados o enlaces que contiene (#10). Mientras se corrige, aplica tus propios estilos CSS a esos elementos.

Este es un port de TailwindCSS v4. Algunos comportamientos específicos de v3 del complemento original —el modo oscuro mediante selector .dark y ciertos formatos de configuración de variantes de elementos— funcionan de forma distinta en v4 y no son compatibles aquí; usa el modificador prose-invert y las variantes v4 en su lugar.

Consulta Complementos para conocer la directiva @plugin y cómo cargar complementos.