Tüpograafiaplugin

@tailwindcss/typography on ametliku tüpograafiapluginа 1:1 PHP port. See lisab klassi prose ja selle modifikaatorid, mis rakendavad renderdatud HTML-plokile loetavad tüpograafia vaikesätted — pealkirjadele, lõikudele, loenditele, tsitaatplokkidele, koodile, tabelitele ja muule — ilma et peaksid iga elementi käsitsi kujundama.

Kasutamine

Laadige plugin käsuga @plugin ja importige utiliitide kiht, seejärel rakendage prose oma sisu ümbritsevale konteinerile:

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

Genereeritud reegel .prose määrab --tw-prose-* kohandatud omadust (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes ja muud) ning stiilib nende kaudu alamelemente.

Klassid

Suurused

Suuruse muutjad skaleerivad kogu tüpograafilist skaalat. Neid kasutatakse koos baasiga prose:

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

Värviteemad

Värvimuutjad vahetavad põhiteksti, pealkirjade ja ääriste jaoks kasutatavat halliskaalat:

Ümberpööramine

prose-invert pöörab värvipaleti ümber, et seda saaks kasutada tumedal taustal. Kombineerige seda vabalt suuruse- ja värvimuutjatega:

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

Suvandid

className

Vaikimisi genereerib plugin klassi prose. Määrake className selle ümbernimetamiseks — muutjad kasutavad uut nime (markdown, markdown-lg, markdown-invert, …). Kui suvand on määratud, klasse prose ei genereerita:

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

Märkused

Elemendimuutjad, näiteks prose-headings:underline või prose-a:text-blue-600, registreeritakse, kuid praeguses versioonis kompileeritakse need ilma elemendi selektorita, mistõttu rakendub utiliit kogu prose-konteinerile, mitte selle sees olevatele pealkirjadele või linkidele (#10). Kuni parandus on saadaval, stiilige neid elemente oma CSS abil.

See on TailwindCSS v4 port. Mõned algse plugina v3-põhised käitumisviisid — selektoril .dark põhinev tume režiim ja teatud elemendivariantide konfiguratsioonivormingud — toimivad v4-is teisiti ning pole siin toetatud; kasutage selle asemel muutjat prose-invert ja variante v4.

Vaadake lehelt Pluginad direktiivi @plugin ja laadimise üksikasjade kohta.