Typografi-plugin

@tailwindcss/typography er en 1:1-port af det officielle typografi-plugin PHP. Det tilføjer klassen prose og dens modifikatorer, som giver en blok med gengivet HTML læsbare typografiske standardindstillinger — overskrifter, afsnit, lister, blokcitater, kode, tabeller med mere — uden at style hvert element manuelt.

Brug

Indlæs pluginet med @plugin, og importer utilities-laget. Anvend derefter prose på beholderen omkring dit indhold:

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

Den genererede regel .prose definerer --tw-prose-* brugerdefinerede egenskaber (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes og andre) og styler de underordnede elementer via dem.

Klasser

Størrelser

Størrelsesmodifikatorer skalerer hele typografiskalaen. De anvendes sammen med grundklassen prose:

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

Farvetemaer

Farvemodifikatorer udskifter gråskalaen, der bruges til brødtekst, overskrifter og kanter:

Invertering

prose-invert vender farvepaletten om, så den kan bruges på mørke baggrunde. Kombiner den frit med størrelses- og farvemodifikatorer:

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

Indstillinger

className

Som standard genererer pluginet klassen prose. Indstil className for at omdøbe den — modifikatorerne følger det nye navn (markdown, markdown-lg, markdown-invert, …). Når den indstilles, genereres klasserne prose ikke:

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

Noter

Elementmodifikatorer såsom prose-headings:underline eller prose-a:text-blue-600 registreres, men i den aktuelle udgave kompileres de uden deres elementselektor. Derfor anvendes utility-klassen på hele beholderen prose i stedet for overskrifterne eller linkene i den (#10). Style disse elementer med din egen CSS, indtil rettelsen er på plads.

Dette er en TailwindCSS-port v4. Nogle v3-specifikke funktioner fra det oprindelige plugin — mørk tilstand via selektoren .dark og visse formater til elementvariantkonfiguration — fungerer anderledes i v4 og understøttes ikke her. Brug i stedet modifikatoren prose-invert og varianterne v4.

Se Plugins for oplysninger om direktivet @plugin og indlæsning.