Tipográfiai bővítmény

A @tailwindcss/typography a hivatalos tipográfiai bővítmény 1:1 arányú PHP átvétele. Hozzáadja a prose osztályt és annak módosítóit, amelyek olvasható tipográfiai alapstílusokat alkalmaznak egy megjelenített HTML-blokkra — címsorokra, bekezdésekre, listákra, idézetblokkokra, kódokra, táblázatokra és más elemekre — anélkül, hogy minden elemet kézzel kellene formáznia.

Használat

Töltse be a bővítményt a @plugin használatával, importálja a segédosztályok rétegét, majd alkalmazza a prose osztályt a tartalmat körülölelő tárolóra:

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

A létrehozott .prose szabály --tw-prose-* egyéni tulajdonságot határoz meg (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes és egyebek), és ezekkel formázza a leszármazott elemeket.

Osztályok

Méretek

A méretmódosítók a teljes tipográfiai skálát méretezik. Az alap prose osztály mellett alkalmazza őket:

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

Színtémák

A színmódosítók módosítják a törzsszöveghez, címsorokhoz és szegélyekhez használt szürkeárnyalatot:

Inverz

A prose-invert sötét hátterekhez megfordítja a színpalettát. Szabadon kombinálható méret- és színmódosítókkal:

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

Beállítások

className

Alapértelmezés szerint a bővítmény létrehozza a prose osztályt. Beállíthatja a className értékét az átnevezéséhez — a módosítók az új nevet követik (markdown, markdown-lg, markdown-invert, …). Ilyenkor prose osztályok nem jönnek létre:

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

Megjegyzések

Az olyan elemmódosítók, mint a prose-headings:underline vagy a prose-a:text-blue-600, regisztrálva vannak, de a jelenlegi kiadásban a hozzájuk tartozó elemszelektor nélkül fordulnak le. Így a segédosztály a teljes prose tárolóra érvényesül, nem pedig a benne lévő címsorokra vagy hivatkozásokra (#10). A javítás megérkezéséig saját CSS segítségével formázza ezeket az elemeket.

Ez a hivatalos TailwindCSS bővítmény v4 átvétele. Az eredeti bővítmény egyes v3-specifikus viselkedései — például a .dark-szelektoros sötét mód és bizonyos elemváltozat-konfigurációs formátumok — v4 alatt eltérően működnek, ezért itt nem támogatottak; használja helyettük a prose-invert módosítót és a v4 változatokat.

Az @plugin direktíváról és a betöltés részleteiről lásd a Bővítmények oldalt.