Приставка за типография

@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 и подробности за зареждането.