Typografický plugin

@tailwindcss/typography je věrný port 1:1 PHP oficiálního typografického pluginu. Přidává třídu prose a její modifikátory, které použijí čitelné typografické výchozí nastavení na blok vykresleného HTML — nadpisy, odstavce, seznamy, citace, kód, tabulky a další — aniž byste museli stylovat každý prvek zvlášť.

Použití

Načtěte plugin pomocí @plugin, importujte vrstvu utilit a pak použijte prose na kontejner obalující 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-* vlastní vlastnosti (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes a další) a styluje podřízené prvky jejich prostřednictvím.

Třídy

Velikosti

Modifikátory velikosti mění měřítko celé typografické škály. Používají se spolu se základní třídou prose:

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

Barevná témata

Modifikátory barev mění odstíny šedé používané pro základní text, nadpisy a okraje:

Inverze

prose-invert převrací paletu barev pro použití na tmavém pozadí. Lze jej libovolně kombinovat s modifikátory velikosti a barvy:

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

Možnosti

className

Ve výchozím nastavení plugin generuje třídu prose. Nastavením className ji přejmenujete — modifikátory pak používají nový název (markdown, markdown-lg, markdown-invert, …). V takovém případě se třídy prose negenerují:

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

Poznámky

Modifikátory prvků, například prose-headings:underline nebo prose-a:text-blue-600, jsou registrované, ale v aktuální verzi se kompilují bez selektoru prvku. Utility se proto použije na celý kontejner prose místo na nadpisy nebo odkazy uvnitř (#10). Dokud nebude oprava k dispozici, stylujte tyto prvky pomocí vlastních CSS.

Jde o port TailwindCSS v4. Některá chování původního pluginu specifická pro v3 — tmavý režim se selektorem .dark a některé formáty konfigurace variant prvků — fungují v v4 jinak a nejsou zde podporována; použijte místo nich modifikátor prose-invert a varianty v4.

Viz Pluginy, kde najdete informace o direktivě @plugin a načítání.