Typografiplugin

@tailwindcss/typography är en 1:1 PHP-port av den officiella typografipluginen. Den lägger till klassen prose och dess modifierare, som ger ett block med renderad HTML lättlästa typografiska standardinställningar – för rubriker, stycken, listor, citatblock, kod, tabeller med mera – utan att du behöver formge varje element för hand.

Användning

Ladda pluginen med @plugin och importera verktygslagret. Använd sedan prose på behållaren som omsluter innehållet:

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 genererade regeln .prose definierar --tw-prose-* anpassade egenskaper (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes med flera) och formger underordnade element med hjälp av dem.

Klasser

Storlekar

Storleksmodifierare skalar hela typografiskalan. De används tillsammans med basklassen prose:

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

Färgteman

Färgmodifierare byter gråskalan som används för brödtext, rubriker och kantlinjer:

Invertera

prose-invert vänder på färgpaletten för användning mot mörka bakgrunder. Kombinera den fritt med storleks- och färgmodifierare:

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

Alternativ

className

Som standard genererar pluginen klassen prose. Ange className för att byta namn på den – modifierarna följer det nya namnet (markdown, markdown-lg, markdown-invert, …). När alternativet anges genereras inte klasserna prose:

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

Kommentarer

Elementmodifierare som prose-headings:underline eller prose-a:text-blue-600 registreras, men i den aktuella versionen kompileras de utan sin elementselektor. Därför gäller verktyget hela behållaren prose i stället för rubrikerna eller länkarna inuti den (#10). Formge elementen med din egen CSS tills felet har åtgärdats.

Det här är en TailwindCSS v4-port. Vissa funktioner som är specifika för v3 i originalpluginen – mörkt läge med selektorn .dark och vissa format för elementvariantkonfiguration – fungerar annorlunda i v4 och stöds inte här. Använd i stället modifieraren prose-invert och varianterna v4.

Se Insticksprogram för direktivet @plugin och information om inläsning.