Plugin typografie

@tailwindcss/typography je 1:1 PHP port oficiálneho pluginu typografie. Pridáva triedu prose a jej modifikátory, ktoré použijú čitateľné typografické predvolené nastavenia na blok vykresleného obsahu HTML — nadpisy, odseky, zoznamy, citácie, kód, tabuľky a ďalšie prvky — bez toho, aby ste museli štýlovať každý prvok zvlášť.

Použitie

Načítajte plugin pomocou @plugin, importujte vrstvu utilít a potom použite prose na kontajner, ktorý obklopuje váš obsah:

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

Vygenerované pravidlo .prose definuje --tw-prose-* vlastností --tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes a ďalších) a pomocou nich štýluje vnorené prvky.

Triedy

Veľkosti

Modifikátory veľkosti menia mierku celej typografickej škály. Používajú sa spolu so základnou triedou prose:

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

Farebné témy

Farebné modifikátory menia sivú škálu použitú pre text tela, nadpisy a orámovania:

Inverzia

prose-invert obráti farebnú paletu, aby sa dala použiť na tmavom pozadí. Môžete ho ľubovoľne kombinovať s modifikátormi veľkosti a farby:

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

Možnosti

className

Plugin predvolene generuje triedu prose. Nastavením className ju premenujete — modifikátory potom používajú nový názov (markdown, markdown-lg, markdown-invert, …). Ak túto možnosť nastavíte, triedy prose sa negenerujú:

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

Poznámky

Modifikátory prvkov, ako sú prose-headings:underline alebo prose-a:text-blue-600, sú zaregistrované, ale v aktuálnom vydaní sa kompilujú bez selektora prvku, takže utilita sa použije na celý kontajner prose namiesto nadpisov alebo odkazov v ňom (#10). Kým nebude oprava dostupná, štýlujte tieto prvky vlastnými CSS.

Ide o port TailwindCSS v4. Niektoré správania pôvodného pluginu špecifické pre v3 — tmavý režim so selektorom .dark a určité formáty konfigurácie variantov prvkov — fungujú v v4 inak a nie sú podporované; namiesto nich použite modifikátor prose-invert a varianty v4.

Podrobnosti o direktíve @plugin a načítaní nájdete v časti Pluginy.