# 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:

```php
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`:

| Clase | Propósito |
|-------|---------|
| `prose` | Tamaño predeterminado |
| `prose-sm` | Pequeño |
| `prose-base` | Base |
| `prose-lg` | Grande |
| `prose-xl` | Extra grande |
| `prose-2xl` | 2× extra grande |

```html
<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:

| Clase | Tema |
|-------|-------|
| `prose-slate` | Pizarra |
| `prose-gray` | Gris |
| `prose-zinc` | Zinc |
| `prose-neutral` | Neutro |
| `prose-stone` | Piedra |

### Invertir

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

```html
<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`:

```php
$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](https://github.com/inline0/tailwindphp/issues/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](https://tailwindphp.inline0.dev/es/docs/plugins) para conocer la directiva `@plugin` y cómo cargar complementos.