# Plugin typografie

`@tailwindcss/typography` je 1:1 PHP port oficiálneho pluginu typografie. Pridáva triedu `prose` a jej modifikátory, ktoré použijú čitateľné typografické predvolené nastavenia na blok vykresleného obsahu HTML — nadpisy, odseky, zoznamy, citácie, kód, tabuľky a ďalšie prvky — bez toho, aby ste museli štýlovať každý prvok zvlášť.

## Použitie

Načítajte plugin pomocou `@plugin`, importujte vrstvu utilít a potom použite `prose` na kontajner, ktorý obklopuje váš obsah:

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

Vygenerované pravidlo `.prose` definuje `--tw-prose-*` vlastností `--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` a ďalších) a pomocou nich štýluje vnorené prvky.

## Triedy

### Veľkosti

Modifikátory veľkosti menia mierku celej typografickej škály. Používajú sa spolu so základnou triedou `prose`:

| Trieda | Účel |
|-------|---------|
| `prose` | Predvolená veľkosť |
| `prose-sm` | Malá |
| `prose-base` | Základná |
| `prose-lg` | Veľká |
| `prose-xl` | Extra veľká |
| `prose-2xl` | Dvojnásobne extra veľká |

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

### Farebné témy

Farebné modifikátory menia sivú škálu použitú pre text tela, nadpisy a orámovania:

| Trieda | Téma |
|-------|-------|
| `prose-slate` | Bridlicová |
| `prose-gray` | Sivá |
| `prose-zinc` | Zinková |
| `prose-neutral` | Neutrálna |
| `prose-stone` | Kamenná |

### Inverzia

`prose-invert` obráti farebnú paletu, aby sa dala použiť na tmavom pozadí. Môžete ho ľubovoľne kombinovať s modifikátormi veľkosti a farby:

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

## Možnosti

### `className`

Plugin predvolene generuje triedu `prose`. Nastavením `className` ju premenujete — modifikátory potom používajú nový názov (`markdown`, `markdown-lg`, `markdown-invert`, …). Ak túto možnosť nastavíte, triedy `prose` sa negenerujú:

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

## Poznámky

Modifikátory prvkov, ako sú `prose-headings:underline` alebo `prose-a:text-blue-600`, sú zaregistrované, ale v aktuálnom vydaní sa kompilujú bez selektora prvku, takže utilita sa použije na celý kontajner `prose` namiesto nadpisov alebo odkazov v ňom ([#10](https://github.com/inline0/tailwindphp/issues/10)). Kým nebude oprava dostupná, štýlujte tieto prvky vlastnými CSS.

Ide o port TailwindCSS v4. Niektoré správania pôvodného pluginu špecifické pre v3 — tmavý režim so selektorom `.dark` a určité formáty konfigurácie variantov prvkov — fungujú v v4 inak a nie sú podporované; namiesto nich použite modifikátor `prose-invert` a varianty v4.

Podrobnosti o direktíve `@plugin` a načítaní nájdete v časti [Pluginy](https://tailwindphp.inline0.dev/sk/docs/plugins).