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

@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 та завантаження див. у розділі Плагіни.