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

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

Использование

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

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:

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

Цветовые темы

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

Инверсия

prose-invert инвертирует цветовую палитру для темного фона. Его можно сочетать с модификаторами размера и цвета:

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

Параметры

className

По умолчанию плагин создает класс prose. Укажите className, чтобы переименовать его; модификаторы будут использовать новое имя (markdown, markdown-lg, markdown-invert, …). В этом случае классы prose не создаются:

$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). Пока это не исправлено, задавайте этим элементам стили с помощью собственных CSS.

Это TailwindCSS v4-порт. Некоторые особенности оригинального плагина, связанные с v3, — темный режим с селектором .dark и отдельные форматы конфигурации вариантов элементов — работают в v4 иначе и здесь не поддерживаются. Вместо них используйте модификатор prose-invert и варианты v4.

См. раздел Плагины, посвященный директиве @plugin и загрузке плагинов.