Plugin de tipografie

@tailwindcss/typography este un port 1:1 PHP al pluginului oficial de tipografie. Adaugă clasa prose și modificatorii săi, care aplică valori tipografice lizibile unui bloc de HTML randat — titluri, paragrafe, liste, citate bloc, cod, tabele și altele — fără a stiliza manual fiecare element.

Utilizare

Încărcați pluginul cu @plugin și importați stratul de utilitare, apoi aplicați prose containerului care încadrează conținutul:

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

Regula .prose generată definește proprietățile personalizate --tw-prose-* (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes și altele) și stilizează elementele descendente prin intermediul acestora.

Clase

Dimensiuni

Modificatorii de dimensiune scalează întreaga scară tipografică. Se aplică alături de clasa de bază prose:

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

Teme de culoare

Modificatorii de culoare schimbă scala de gri folosită pentru textul obișnuit, titluri și borduri:

Inversare

prose-invert inversează paleta de culori pentru utilizarea pe fundaluri întunecate. Combinați-l liber cu modificatorii de dimensiune și culoare:

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

Opțiuni

className

În mod implicit, pluginul generează clasa prose. Setați className pentru a o redenumi — modificatorii vor folosi noul nume (markdown, markdown-lg, markdown-invert, …). Când este setată, clasele prose nu sunt generate:

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

Note

Modificatorii de elemente, precum prose-headings:underline sau prose-a:text-blue-600, sunt înregistrați, dar în versiunea actuală se compilează fără selectorul elementului, astfel încât utilitarul se aplică întregului container prose, în loc să se aplice titlurilor sau linkurilor din interiorul acestuia (#10). Stilizați aceste elemente cu propriul CSS până când este lansată remedierea.

Acesta este un port TailwindCSS v4. Unele comportamente specifice v3 din pluginul original — modul întunecat bazat pe selectorul .dark și anumite formate de configurare pentru variantele elementelor — funcționează diferit în v4 și nu sunt acceptate aici; folosiți modificatorul prose-invert și variantele v4 în schimb.

Consultați Plugins pentru directiva @plugin și detalii despre încărcare.