Vtičnik za tipografijo

@tailwindcss/typography je 1:1 PHP različica uradnega vtičnika za tipografijo. Doda razred prose in njegove modifikatorje, ki bloku izrisanega HTML — naslovom, odstavkom, seznamom, navedkom, kodi, tabelam in drugemu — dodajo berljive tipografske privzete nastavitve, ne da bi morali ročno oblikovati vsak element.

Uporaba

Vtičnik naložite z @plugin in uvozite plast pripomočkov, nato pa za vsebnik, ki obdaja vašo vsebino, uporabite prose:

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

Ustvarjeno pravilo .prose določa --tw-prose-* lastnosti po meri (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes in druge) ter prek njih oblikuje podrejene elemente.

Razredi

Velikosti

Modifikatorji velikosti prilagodijo celotno tipografsko lestvico. Uporabijo se skupaj z osnovnim razredom prose:

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

Barvne teme

Barvni modifikatorji zamenjajo sivino, uporabljeno za besedilo, naslove in obrobe:

Inverzija

prose-invert obrne barvno paleto za uporabo na temnih ozadjih. Poljubno ga kombinirajte z modifikatorji velikosti in barve:

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

Možnosti

className

Vtičnik privzeto ustvari razred prose. Z nastavitvijo className ga lahko preimenujete — modifikatorji sledijo novemu imenu (markdown, markdown-lg, markdown-invert, …). Če to nastavite, razredi prose ne bodo ustvarjeni:

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

Opombe

Modifikatorji elementov, kot sta prose-headings:underline ali prose-a:text-blue-600, so registrirani, vendar se v trenutni izdaji prevedejo brez izbirnika elementa, zato pripomoček velja za celoten vsebnik prose namesto samo za naslove ali povezave v njem (#10). Dokler popravek ne bo na voljo, te elemente oblikujte z lastnim CSS.

To je različica TailwindCSS v4. Nekatera vedenja iz izvirnega vtičnika, specifična za v3 — temni način z izbirnikom .dark in določeni zapisi konfiguracije različic elementov — v v4 delujejo drugače in tukaj niso podprta; namesto njih uporabite modifikator prose-invert in različice v4.

Direktivo @plugin in navodila za nalaganje najdete v razdelku Vtičniki.