Tailwind CSS Typography Plugin: prose-Klassen richtig einsetzen

1. Das Problem: Tailwind reset und CMS-Content

Tailwind CSS setzt mit seinem Preflight-Stylesheet alle Browser-Standardstyles zurück. Das ist gewollt – es sorgt für konsistentes Verhalten über Browser hinweg und gibt Entwicklern eine saubere Basis. Für UI-Komponenten, die mit Tailwind-Klassen gebaut werden, funktioniert das perfekt. Für CMS-Content, der als rohes HTML aus einem Editor kommt, ist es ein Problem: Überschriften sehen nicht mehr wie Überschriften aus, Listen verlieren ihre Punkte, Links haben keine Farbe mehr. Wer den CMS-Inhalt dann mit Tailwind-Klassen manuell zurück auf normale Typografie bringt, schreibt letztendlich einen manuellen Reset des Resets.

Genau hier setzt das Tailwind CSS Typography Plugin an. Das offizielle Plugin @tailwindcss/typography fügt die prose-Klasse hinzu, die auf einen Elterncontainer angewendet wird. Alle Kindelemente – h1 bis h6, p, ul, ol, blockquote, code, pre, table, img und viele mehr – erhalten automatisch durchdachte typografische Stile. Das Plugin ist für Markdown-gerenderte Inhalte, Blog-Posts, Dokumentationen und jede Art von redaktionellem Inhalt gedacht, bei dem man keinen direkten Einfluss auf die HTML-Struktur hat.

2. Installation und Grundkonfiguration des Typography Plugins

Das Tailwind CSS Typography Plugin wird über npm installiert und danach in der Tailwind-Konfiguration registriert. In Tailwind v3 geschieht das in der tailwind.config.js. In Tailwind v4 mit dem CSS-first-Ansatz wird das Plugin direkt in der CSS-Datei eingebunden. Das Plugin selbst ist ein offiziell von Tailwind Labs gepflegtes Paket und wird mit dem Kern von Tailwind abgestimmt, sodass Breaking Changes unwahrscheinlich sind.

Nach der Installation und Konfiguration stehen sofort alle prose-Klassen zur Verfügung. Es werden keine weiteren Schritte benötigt – kein eigenes CSS, keine manuellen Selektoren. Das ist der zentrale Vorteil des Typography Plugins: Es funktioniert out of the box für den häufigsten Anwendungsfall und bietet gleichzeitig eine strukturierte API für Anpassungen. In Projekten mit einem Build-Step, etwa mit Vite oder Webpack, wird das Plugin bei jeder Änderung in der Konfiguration automatisch neu ausgewertet.

/* tailwind.css — Tailwind v4 CSS-first configuration */
@import "tailwindcss";

/* Import the typography plugin for prose classes */
@plugin "@tailwindcss/typography";

/* Custom prose theme overrides — scoped to the prose selector */
@layer base {
  :root {
    --tw-prose-body: theme(colors.slate.700);
    --tw-prose-headings: theme(colors.slate.900);
    --tw-prose-links: theme(colors.sky.600);
    --tw-prose-code: theme(colors.sky.700);
    --tw-prose-pre-bg: theme(colors.slate.900);
  }
}

3. Die prose-Klasse: Was sie macht und warum

Die prose-Klasse ist ein CSS-Namespace-Wrapper. Das Plugin generiert einen großen Satz von CSS-Selektoren, die alle das Format .prose > *, .prose h1, .prose p und so weiter verwenden. Diese Selektoren setzen die Preflight-Resets zurück und legen sorgfältig abgestimmte typografische Regeln fest: Zeilenhöhe, Abstände, Schriftgrößen, Farben und Ränder für alle relevanten HTML-Elemente. Der entscheidende Punkt: Diese Regeln greifen ausschließlich innerhalb des Elements, das die prose-Klasse trägt.

Das bedeutet, dass das Tailwind Typography Plugin strikt lokal wirkt. UI-Komponenten außerhalb des prose-Containers bleiben vom Plugin vollständig unberührt. Man kann ein aufwendiges Design-System mit Tailwind aufbauen und gleichzeitig einen CMS-Content-Bereich mit prose stylen, ohne Konflikte befürchten zu müssen. Intern arbeitet das Plugin mit CSS-Custom-Properties, die das Theme definieren – das macht spätere Anpassungen sehr elegant, weil man nur die Custom Properties überschreiben muss, statt Selektoren zu duplizieren.

4. Größen-Modifikatoren: prose-sm bis prose-2xl

Das Tailwind CSS Typography Plugin liefert fünf vorgefertigte Größen-Modifikatoren: prose-sm, prose-base, prose-lg, prose-xl und prose-2xl. Diese Modifikatoren passen nicht nur die Schriftgröße an, sondern skalieren alle typografischen Maßangaben proportional: Überschriftengrößen, Abstände zwischen Elementen, Code-Block-Padding und Tabellenformate werden alle kohärent vergrößert oder verkleinert. Das ist wesentlich ausgefeilter als einfaches Font-Scaling.

In der Praxis verwendet man prose-base für den Standardfall, prose-lg für gut lesbare Blogartikel und prose-sm für kompakte Dokumentationsbereiche oder Seitenleisten. Die Kombination mit responsiven Präfixen ist vollständig möglich: prose prose-sm md:prose-base lg:prose-lg passt die Typografie an die Bildschirmgröße an. Das Typography Plugin unterstützt dabei alle Tailwind-Breakpoint-Präfixe ohne zusätzliche Konfiguration – die Modifikatoren sind vollständig als responsive Klassen verfügbar.

5. not-prose: Elemente aus dem Typography-Scope herausnehmen

In der Praxis kommt regelmäßig der Fall vor, dass man innerhalb eines CMS-Content-Bereichs eine UI-Komponente einbetten möchte, die nicht vom prose-Styling beeinflusst werden soll: ein Call-to-Action-Banner, eine Produktkarte, eine interaktive Demo oder ein Codeblock mit eigener Formatierung. Hier kommt die not-prose-Klasse ins Spiel. Sie unterbricht das Typography Plugin-Styling für das Element und alle seine Kindelemente.

Der Mechanismus dahinter ist elegant: Das Plugin generiert für alle seine Selektoren eine zusätzliche Negation, die not-prose ausschließt. Ein Element mit class="not-prose" innerhalb eines prose-Containers bekommt keine der typografischen Regeln des Plugins angewendet. Wichtig zu verstehen: not-prose muss direkt auf das Element gesetzt werden, das man herausnehmen will – es reicht nicht, es auf ein äußeres Hüllelelement zu setzen, wenn Tailwind-Selektoren direkt auf Kindelemente zielen. Dieses Muster wird in diesem Artikel selbst verwendet: Alle Nicht-Text-Blöcke wie der Hero, das Inhaltsverzeichnis und die Zusammenfassungskarte tragen die not-prose-Klasse.

<!-- CMS content area with embedded UI component -->
<div class="prose prose-lg max-w-none">
  <h1>Produktbeschreibung</h1>
  <p>Dieser Artikel erklärt das Typography Plugin vollständig.</p>

  <!-- UI component that must NOT be styled by prose -->
  <div class="not-prose bg-sky-50 border border-sky-200 rounded-xl p-6 my-8">
    <div class="flex items-center gap-4">
      <div class="w-12 h-12 bg-sky-500 rounded-full flex items-center justify-center text-white font-bold">
        TW
      </div>
      <div>
        <p class="font-bold text-sky-900 text-lg m-0">Tailwind CSS Kurs</p>
        <p class="text-sky-700 text-sm m-0">Alle prose-Klassen in einem Kurs erklärt</p>
      </div>
    </div>
    <!-- Tailwind classes work normally here — no prose override -->
    <a href="/kurs" class="mt-4 inline-block bg-sky-600 text-white px-6 py-2 rounded-lg font-semibold text-sm hover:bg-sky-700 transition-colors">
      Zum Kurs
    </a>
  </div>

  <p>Der Text hier wird wieder normal von prose gestylt.</p>
</div>

6. prose-Klasse anpassen: theme()-Konfiguration

Das Tailwind CSS Typography Plugin ist vollständig anpassbar. Die Grundlage für Anpassungen sind CSS-Custom-Properties, die das Plugin intern für alle typografischen Entscheidungen verwendet. Statt Selektoren zu überschreiben, setzt man einfach die entsprechende Custom Property neu. Das Plugin definiert Variablen für Textfarbe, Überschriftenfarbe, Link-Farbe, Code-Farbe, Hintergrundfarbe von Codeblöcken, Randfarben und viele weitere Aspekte. In Tailwind v4 mit dem CSS-first-Ansatz setzt man diese Variablen direkt im CSS.

Für projektspezifische prose-Themes kann man eigene prose-Varianten erstellen. In Tailwind v3 geschieht das über den typography-Schlüssel in der theme-Konfiguration, wo man benannte Konfigurationsobjekte definiert. Ein prose-brand-Modifier ist dann mit <div class="prose prose-brand"> verwendbar. Diese Erweiterbarkeit macht das Typography Plugin zur richtigen Lösung auch für Projekte mit eigenem Design-System – man muss nicht zwischen dem Plugin und eigenem Branding wählen, sondern kann beides verbinden.

/* Custom prose theme — overriding typography plugin CSS variables */
@layer base {
  /* Default prose theme (light mode) */
  .prose {
    --tw-prose-body: theme(colors.slate.700);
    --tw-prose-headings: theme(colors.slate.900);
    --tw-prose-lead: theme(colors.slate.600);
    --tw-prose-links: theme(colors.sky.600);
    --tw-prose-bold: theme(colors.slate.900);
    --tw-prose-counters: theme(colors.sky.500);
    --tw-prose-bullets: theme(colors.sky.400);
    --tw-prose-hr: theme(colors.slate.200);
    --tw-prose-quotes: theme(colors.slate.900);
    --tw-prose-quote-borders: theme(colors.sky.400);
    --tw-prose-captions: theme(colors.slate.500);
    --tw-prose-code: theme(colors.sky.700);
    --tw-prose-pre-code: theme(colors.sky.200);
    --tw-prose-pre-bg: theme(colors.slate.900);
    --tw-prose-th-borders: theme(colors.slate.300);
    --tw-prose-td-borders: theme(colors.slate.200);
  }
}

7. Dark Mode mit prose-invert

Dark-Mode-Unterstützung ist in das Tailwind CSS Typography Plugin eingebaut. Die Klasse prose-invert schaltet die gesamte Farbpalette auf eine für dunkle Hintergründe optimierte Variante um. Text, Überschriften, Links, Code und alle anderen farbigen Elemente werden automatisch auf helle, kontrastreiche Töne umgestellt. In Kombination mit Tailwinds Dark-Mode-Präfix wird das so verwendet: prose dark:prose-invert. Das Präfix stellt sicher, dass prose-invert nur aktiviert wird, wenn der Benutzer den Dark Mode aktiviert hat.

Die Dark-Mode-Farben von prose-invert können genau wie die Light-Mode-Farben angepasst werden. Das Plugin definiert für jede Light-Mode-Variable eine entsprechende Invert-Variable: --tw-prose-invert-body, --tw-prose-invert-headings, --tw-prose-invert-links und so weiter. Diese setzt man analog zu den Light-Mode-Variablen. Ein vollständiges Brand-konsistentes Dark-Mode-Typography-Theme ist so mit etwa zwanzig Custom-Property-Definitionen realisierbar – ohne einen einzigen eigenen CSS-Selektor zu schreiben. Das ist der Kernvorteil des Typography Plugins gegenüber manuellen Lösungen.

8. prose vs. manuelle Typografie: ein direkter Vergleich

Die Alternative zu prose ist, jeden typografischen Aspekt manuell zu steuern. Das bedeutet in der Praxis: Für jeden HTML-Tag innerhalb des Content-Bereichs eigene Stile schreiben, die den Preflight-Reset überschreiben. Das ist möglich, aber aufwendig und fehleranfällig – besonders wenn neue Tags hinzukommen oder das Design geändert wird. Ein Vergleich zwischen beiden Ansätzen zeigt, warum das Tailwind CSS Typography Plugin die überlegene Wahl für CMS-Content ist.

9. Typography Plugin in Tailwind v4

Tailwind v4 bringt den CSS-first-Ansatz: Die gesamte Konfiguration wandert aus der JavaScript-Datei ins CSS. Das Tailwind CSS Typography Plugin ist seit Version 0.5.x auf diesen Ansatz vorbereitet. In Tailwind v4 wird das Plugin mit @plugin "@tailwindcss/typography" direkt in der CSS-Hauptdatei eingebunden. Die Plugin-Installation via npm bleibt gleich. Anpassungen werden nicht mehr in tailwind.config.js unter dem typography-Schlüssel gemacht, sondern direkt über CSS-Custom-Properties in der CSS-Datei.

Der Unterschied im Workflow ist erheblich: In v3 musste man für eine prose-Farbanpassung in die JavaScript-Konfiguration, den Wert als Funktionsreferenz auf das Tailwind-Theme formulieren und dann den Build neu starten. In v4 ist eine Farbanpassung ein simples --tw-prose-links: #0369a1; in der CSS-Datei – sofort sichtbar, ohne Build-Neustart wenn Hot Reloading aktiv ist. Für Teams, die bisher an der JavaScript-Konfiguration des Typography Plugins angepasst haben, ist die Migration zum CSS-Ansatz in v4 eine Vereinfachung, keine Mehrarbeit.

/* tailwind.css — Full Tailwind v4 typography plugin setup */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Custom prose variant "hyva" for Hyvä Themes integration */
@layer utilities {
  .prose-hyva {
    --tw-prose-body: theme(colors.gray.700);
    --tw-prose-headings: theme(colors.gray.900);
    --tw-prose-links: theme(colors.sky.600);
    --tw-prose-code: theme(colors.sky.700);
    --tw-prose-pre-bg: theme(colors.slate.900);
    --tw-prose-pre-code: theme(colors.sky.200);
    --tw-prose-quote-borders: theme(colors.sky.400);
    --tw-prose-bullets: theme(colors.sky.500);
    --tw-prose-counters: theme(colors.sky.500);
    /* Invert variables for dark mode via dark:prose-invert */
    --tw-prose-invert-body: theme(colors.slate.300);
    --tw-prose-invert-headings: theme(colors.white);
    --tw-prose-invert-links: theme(colors.sky.400);
    --tw-prose-invert-code: theme(colors.sky.300);
  }
}

10. Zusammenfassung

Das Tailwind CSS Typography Plugin mit der prose-Klasse ist die richtige Lösung für jeden Anwendungsfall, bei dem HTML-Inhalt aus einer externen Quelle – CMS, Markdown-Renderer, API – typografisch gestylt werden muss, ohne direkten Einfluss auf die HTML-Struktur zu haben. Es löst das Preflight-Problem elegant, ohne Tailwinds Utility-First-Ansatz zu untergraben. Die Kombinierbarkeit mit Dark Mode durch prose-invert, die responsiven Größen-Modifikatoren und die vollständige Anpassbarkeit über Custom Properties machen es zum Werkzeug erster Wahl.

Der wichtigste operationale Aspekt: not-prose konsequent auf eingebettete UI-Komponenten anwenden. Wer das vergisst, wundert sich über seltsam aussehende Buttons oder Karten innerhalb von CMS-Bereichen. In Tailwind v4-Projekten lohnt sich der Einsatz des CSS-first-Ansatzes für Plugin-Konfiguration – er vereinfacht die Anpassung erheblich und hält alle Typografie-Entscheidungen an einem Ort im CSS, statt zwischen JavaScript- und CSS-Dateien zu verteilen.

11. FAQ: Tailwind CSS Typography Plugin und prose