# Typografieplugin

`@tailwindcss/typography` is een 1:1-port van de officiële typografieplugin van PHP. De plugin voegt de klasse `prose` en de bijbehorende modifiers toe. Die passen goed leesbare typografische standaardstijlen toe op een blok gerenderde HTML — koppen, alinea's, lijsten, blockquotes, code, tabellen en meer — zonder dat je elk element handmatig hoeft op te maken.

## Gebruik

Laad de plugin met `@plugin` en importeer de utilitieslaag. Pas vervolgens `prose` toe op de container om je content:

```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";'
);
```

De gegenereerde regel `.prose` definieert `--tw-prose-*` aangepaste eigenschappen (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` en andere) en stijlt daarmee de onderliggende elementen.

## Klassen

### Grootten

Groottemodifiers schalen de volledige typografische schaal. Je past ze toe naast de basis-`prose`-klasse:

| Klasse | Doel |
|-------|---------|
| `prose` | Standaardgrootte |
| `prose-sm` | Klein |
| `prose-base` | Basis |
| `prose-lg` | Groot |
| `prose-xl` | Extra groot |
| `prose-2xl` | 2× extra groot |

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

### Kleurthema's

Kleurmodifiers wisselen de grijstinten voor hoofdtekst, koppen en randen:

| Klasse | Thema |
|-------|-------|
| `prose-slate` | Leisteen |
| `prose-gray` | Grijs |
| `prose-zinc` | Zink |
| `prose-neutral` | Neutraal |
| `prose-stone` | Steen |

### Omkering

`prose-invert` keert het kleurenpalet om voor gebruik op donkere achtergronden. Combineer dit naar wens met grootte- en kleurmodifiers:

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

## Opties

### `className`

Standaard genereert de plugin de klasse `prose`. Stel `className` in om de klasse een andere naam te geven — de modifiers volgen de nieuwe naam (`markdown`, `markdown-lg`, `markdown-invert`, …). Als deze optie is ingesteld, worden klassen `prose` niet gegenereerd:

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

## Opmerkingen

Elementmodifiers zoals `prose-headings:underline` of `prose-a:text-blue-600` zijn geregistreerd, maar worden in de huidige versie gecompileerd zonder hun elementselector. Daardoor is de utility van toepassing op de hele container `prose` in plaats van alleen op de koppen of links erin ([#10](https://github.com/inline0/tailwindphp/issues/10)). Stijl die elementen zelf met CSS totdat dit is opgelost.

Dit is een TailwindCSS-port voor v4. Sommige functies die specifiek zijn voor v3 uit de oorspronkelijke plugin — de donkere modus met `.dark`-selector en bepaalde configuratieformaten voor elementvarianten — werken anders in v4 en worden hier niet ondersteund. Gebruik in plaats daarvan de modifier `prose-invert` en varianten v4.

Zie [Plugins](https://tailwindphp.inline0.dev/nl/docs/plugins) voor de directive `@plugin` en informatie over het laden.