Typografieplugin

@tailwindcss/typography is een 1:1-port van de officiële typografieplugin van PHP. De plugin voegt de klasse prose en de bijbehorende modifiers toe. Die passen goed leesbare typografische standaardstijlen toe op een blok gerenderde HTML — koppen, alinea's, lijsten, blockquotes, code, tabellen en meer — zonder dat je elk element handmatig hoeft op te maken.

Gebruik

Laad de plugin met @plugin en importeer de utilitieslaag. Pas vervolgens prose toe op de container om je content:

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

De gegenereerde regel .prose definieert --tw-prose-* aangepaste eigenschappen (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes en andere) en stijlt daarmee de onderliggende elementen.

Klassen

Grootten

Groottemodifiers schalen de volledige typografische schaal. Je past ze toe naast de basis-prose-klasse:

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

Kleurthema's

Kleurmodifiers wisselen de grijstinten voor hoofdtekst, koppen en randen:

Omkering

prose-invert keert het kleurenpalet om voor gebruik op donkere achtergronden. Combineer dit naar wens met grootte- en kleurmodifiers:

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

Opties

className

Standaard genereert de plugin de klasse prose. Stel className in om de klasse een andere naam te geven — de modifiers volgen de nieuwe naam (markdown, markdown-lg, markdown-invert, …). Als deze optie is ingesteld, worden klassen prose niet gegenereerd:

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

Opmerkingen

Elementmodifiers zoals prose-headings:underline of prose-a:text-blue-600 zijn geregistreerd, maar worden in de huidige versie gecompileerd zonder hun elementselector. Daardoor is de utility van toepassing op de hele container prose in plaats van alleen op de koppen of links erin (#10). Stijl die elementen zelf met CSS totdat dit is opgelost.

Dit is een TailwindCSS-port voor v4. Sommige functies die specifiek zijn voor v3 uit de oorspronkelijke plugin — de donkere modus met .dark-selector en bepaalde configuratieformaten voor elementvarianten — werken anders in v4 en worden hier niet ondersteund. Gebruik in plaats daarvan de modifier prose-invert en varianten v4.

Zie Plugins voor de directive @plugin en informatie over het laden.