# Tipográfiai bővítmény

A `@tailwindcss/typography` a hivatalos tipográfiai bővítmény 1:1 arányú PHP átvétele. Hozzáadja a `prose` osztályt és annak módosítóit, amelyek olvasható tipográfiai alapstílusokat alkalmaznak egy megjelenített HTML-blokkra — címsorokra, bekezdésekre, listákra, idézetblokkokra, kódokra, táblázatokra és más elemekre — anélkül, hogy minden elemet kézzel kellene formáznia.

## Használat

Töltse be a bővítményt a `@plugin` használatával, importálja a segédosztályok rétegét, majd alkalmazza a `prose` osztályt a tartalmat körülölelő tárolóra:

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

A létrehozott `.prose` szabály `--tw-prose-*` egyéni tulajdonságot határoz meg (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` és egyebek), és ezekkel formázza a leszármazott elemeket.

## Osztályok

### Méretek

A méretmódosítók a teljes tipográfiai skálát méretezik. Az alap `prose` osztály mellett alkalmazza őket:

| Osztály | Rendeltetés |
|-------|---------|
| `prose` | Alapértelmezett méret |
| `prose-sm` | Kicsi |
| `prose-base` | Alapméret |
| `prose-lg` | Nagy |
| `prose-xl` | Extra nagy |
| `prose-2xl` | 2× extra nagy |

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

### Színtémák

A színmódosítók módosítják a törzsszöveghez, címsorokhoz és szegélyekhez használt szürkeárnyalatot:

| Osztály | Téma |
|-------|-------|
| `prose-slate` | Pala |
| `prose-gray` | Szürke |
| `prose-zinc` | Cink |
| `prose-neutral` | Semleges |
| `prose-stone` | Kő |

### Inverz

A `prose-invert` sötét hátterekhez megfordítja a színpalettát. Szabadon kombinálható méret- és színmódosítókkal:

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

## Beállítások

### `className`

Alapértelmezés szerint a bővítmény létrehozza a `prose` osztályt. Beállíthatja a `className` értékét az átnevezéséhez — a módosítók az új nevet követik (`markdown`, `markdown-lg`, `markdown-invert`, …). Ilyenkor `prose` osztályok nem jönnek létre:

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

## Megjegyzések

Az olyan elemmódosítók, mint a `prose-headings:underline` vagy a `prose-a:text-blue-600`, regisztrálva vannak, de a jelenlegi kiadásban a hozzájuk tartozó elemszelektor nélkül fordulnak le. Így a segédosztály a teljes `prose` tárolóra érvényesül, nem pedig a benne lévő címsorokra vagy hivatkozásokra ([#10](https://github.com/inline0/tailwindphp/issues/10)). A javítás megérkezéséig saját CSS segítségével formázza ezeket az elemeket.

Ez a hivatalos TailwindCSS bővítmény v4 átvétele. Az eredeti bővítmény egyes v3-specifikus viselkedései — például a `.dark`-szelektoros sötét mód és bizonyos elemváltozat-konfigurációs formátumok — v4 alatt eltérően működnek, ezért itt nem támogatottak; használja helyettük a `prose-invert` módosítót és a v4 változatokat.

Az `@plugin` direktíváról és a betöltés részleteiről lásd a [Bővítmények](https://tailwindphp.inline0.dev/hu/docs/plugins) oldalt.