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

`@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.

См. раздел [Плагины](https://tailwindphp.inline0.dev/ru/docs/plugins), посвященный директиве `@plugin` и загрузке плагинов.