Typografie-Plugin

@tailwindcss/typography ist ein 1:1-PHP-Port des offiziellen Typografie-Plugins. Es ergänzt die Klasse prose und ihre Modifikatoren, die für einen Block mit gerendertem HTML lesbare typografische Vorgaben festlegen — für Überschriften, Absätze, Listen, Blockzitate, Code, Tabellen und mehr. So musst du nicht jedes Element einzeln gestalten.

Verwendung

Lade das Plugin mit @plugin und importiere die Utilities-Ebene. Wende anschließend prose auf den Container an, der deinen Inhalt umschließt:

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

Die generierte Regel .prose definiert --tw-prose-* benutzerdefinierte Eigenschaften (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes und weitere) und gestaltet die Nachfahrenelemente mithilfe dieser Eigenschaften.

Klassen

Größen

Größenmodifikatoren skalieren die gesamte typografische Größenreihe. Wende sie zusätzlich zur Basisklasse prose an:

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

Farbthemen

Farbmodifikatoren ändern die Graustufenpalette für Fließtext, Überschriften und Rahmen:

Invertierung

prose-invert kehrt die Farbpalette für dunkle Hintergründe um. Du kannst es beliebig mit Größen- und Farbmodifikatoren kombinieren:

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

Optionen

className

Standardmäßig generiert das Plugin die Klasse prose. Lege className fest, um sie umzubenennen — die Modifikatoren übernehmen den neuen Namen (markdown, markdown-lg, markdown-invert, …). Die Klassen prose werden dann nicht generiert:

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

Hinweise

Elementmodifikatoren wie prose-headings:underline oder prose-a:text-blue-600 werden zwar registriert, in der aktuellen Version jedoch ohne ihren Elementselektor kompiliert. Daher wird die Utility auf den gesamten prose-Container angewendet statt nur auf Überschriften oder Links darin (#10). Gestalte diese Elemente mit eigenen CSS, bis der Fehler behoben ist.

Dies ist ein Port für TailwindCSS v4. Einige v3-spezifische Verhaltensweisen des ursprünglichen Plugins — der Dunkelmodus mit .dark-Selektor und bestimmte Konfigurationsformate für Elementvarianten — funktionieren in v4 anders und werden hier nicht unterstützt. Verwende stattdessen den Modifikator prose-invert und v4-Varianten.

Informationen zur @plugin-Direktive und zum Laden findest du unter Plugins.