# Typografie-Plugin

`@tailwindcss/typography` ist ein 1:1-PHP-Port des offiziellen Typografie-Plugins. Es ergänzt die Klasse `prose` und ihre Modifikatoren, die für einen Block mit gerendertem HTML lesbare typografische Vorgaben festlegen — für Überschriften, Absätze, Listen, Blockzitate, Code, Tabellen und mehr. So musst du nicht jedes Element einzeln gestalten.

## Verwendung

Lade das Plugin mit `@plugin` und importiere die Utilities-Ebene. Wende anschließend `prose` auf den Container an, der deinen Inhalt umschließt:

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

Die generierte Regel `.prose` definiert `--tw-prose-*` benutzerdefinierte Eigenschaften (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` und weitere) und gestaltet die Nachfahrenelemente mithilfe dieser Eigenschaften.

## Klassen

### Größen

Größenmodifikatoren skalieren die gesamte typografische Größenreihe. Wende sie zusätzlich zur Basisklasse `prose` an:

| Klasse | Zweck |
|-------|---------|
| `prose` | Standardgröße |
| `prose-sm` | Klein |
| `prose-base` | Mittel |
| `prose-lg` | Groß |
| `prose-xl` | Sehr groß |
| `prose-2xl` | Zweimal sehr groß |

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

### Farbthemen

Farbmodifikatoren ändern die Graustufenpalette für Fließtext, Überschriften und Rahmen:

| Klasse | Theme |
|-------|-------|
| `prose-slate` | Slate |
| `prose-gray` | Grau |
| `prose-zinc` | Zink |
| `prose-neutral` | Neutral |
| `prose-stone` | Stein |

### Invertierung

`prose-invert` kehrt die Farbpalette für dunkle Hintergründe um. Du kannst es beliebig mit Größen- und Farbmodifikatoren kombinieren:

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

## Optionen

### `className`

Standardmäßig generiert das Plugin die Klasse `prose`. Lege `className` fest, um sie umzubenennen — die Modifikatoren übernehmen den neuen Namen (`markdown`, `markdown-lg`, `markdown-invert`, …). Die Klassen `prose` werden dann nicht generiert:

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

## Hinweise

Elementmodifikatoren wie `prose-headings:underline` oder `prose-a:text-blue-600` werden zwar registriert, in der aktuellen Version jedoch ohne ihren Elementselektor kompiliert. Daher wird die Utility auf den gesamten `prose`-Container angewendet statt nur auf Überschriften oder Links darin ([#10](https://github.com/inline0/tailwindphp/issues/10)). Gestalte diese Elemente mit eigenen CSS, bis der Fehler behoben ist.

Dies ist ein Port für TailwindCSS v4. Einige v3-spezifische Verhaltensweisen des ursprünglichen Plugins — der Dunkelmodus mit `.dark`-Selektor und bestimmte Konfigurationsformate für Elementvarianten — funktionieren in v4 anders und werden hier nicht unterstützt. Verwende stattdessen den Modifikator `prose-invert` und v4-Varianten.

Informationen zur `@plugin`-Direktive und zum Laden findest du unter [Plugins](https://tailwindphp.inline0.dev/de/docs/plugins).