# Плагін типографіки

`@tailwindcss/typography` — це 1:1 PHP порт офіційного плагіна типографіки. Він додає клас `prose` та його модифікатори, які застосовують читабельні типографічні значення за замовчуванням до блоку відображеного HTML — заголовків, абзаців, списків, цитат, коду, таблиць тощо — без потреби стилізувати кожен елемент вручну.

## Використання

Завантажте плагін за допомогою `@plugin` та імпортуйте шар утиліт, а потім застосуйте `prose` до контейнера, що охоплює ваш вміст:

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

Згенероване правило `.prose` визначає `--tw-prose-*` власних властивостей (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` тощо) і стилізує дочірні елементи за їх допомогою.

## Класи

### Розміри

Модифікатори розміру масштабують усю типографічну шкалу. Їх застосовують разом із базовим класом `prose`:

| Клас | Призначення |
|-------|---------|
| `prose` | Розмір за замовчуванням |
| `prose-sm` | Малий |
| `prose-base` | Базовий |
| `prose-lg` | Великий |
| `prose-xl` | Дуже великий |
| `prose-2xl` | У 2× більший |

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

### Кольорові теми

Модифікатори кольору змінюють відтінок сірого для основного тексту, заголовків і рамок:

| Клас | Тема |
|-------|-------|
| `prose-slate` | Сланцева |
| `prose-gray` | Сіра |
| `prose-zinc` | Цинкова |
| `prose-neutral` | Нейтральна |
| `prose-stone` | Кам'яна |

### Інверсія

`prose-invert` інвертує палітру кольорів для використання на темному тлі. Його можна вільно поєднувати з модифікаторами розміру й кольору:

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

## Параметри

### `className`

За замовчуванням плагін генерує клас `prose`. Задайте `className`, щоб перейменувати його — модифікатори отримають нову назву (`markdown`, `markdown-lg`, `markdown-invert`, …). У такому разі класи `prose` не генеруються:

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

## Примітки

Модифікатори елементів, як-от `prose-headings:underline` або `prose-a:text-blue-600`, зареєстровані, але в поточному випуску компілюються без селектора елемента, тож утиліта застосовується до всього контейнера `prose`, а не до заголовків чи посилань усередині нього ([#10](https://github.com/inline0/tailwindphp/issues/10)). Поки виправлення не буде випущено, стилізуйте ці елементи власним CSS.

Це TailwindCSS v4 порт. Деякі особливості оригінального плагіна, специфічні для v3, — темний режим із селектором `.dark` і певні формати конфігурації варіантів елементів — у v4 працюють інакше й тут не підтримуються; натомість використовуйте модифікатор `prose-invert` і варіанти v4.

Докладніше про директиву `@plugin` та завантаження див. у розділі [Плагіни](https://tailwindphp.inline0.dev/uk/docs/plugins).