Plugin de typographie

@tailwindcss/typography est un portage 1:1 de PHP, le plugin officiel de typographie. Il ajoute la classe prose et ses modificateurs, qui appliquent des styles typographiques lisibles à un bloc de HTML rendu — titres, paragraphes, listes, citations, code, tableaux et plus encore — sans devoir styliser chaque élément manuellement.

Utilisation

Chargez le plugin avec @plugin et importez la couche des utilitaires, puis appliquez prose au conteneur qui englobe votre contenu :

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

La règle .prose générée définit les propriétés personnalisées --tw-prose-* (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes et d’autres) et applique des styles aux éléments descendants par leur intermédiaire.

Classes

Tailles

Les modificateurs de taille ajustent toute l’échelle typographique. Ils s’utilisent avec la classe prose de base :

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

Thèmes de couleur

Les modificateurs de couleur remplacent l’échelle de gris utilisée pour le texte courant, les titres et les bordures :

Inversion

prose-invert inverse la palette de couleurs pour une utilisation sur des arrière-plans sombres. Combinez-le librement avec les modificateurs de taille et de couleur :

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

Options

className

Par défaut, le plugin génère la classe prose. Définissez className pour la renommer ; les modificateurs suivent le nouveau nom (markdown, markdown-lg, markdown-invert, …). Dans ce cas, les classes prose ne sont pas générées :

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

Remarques

Les modificateurs d’élément tels que prose-headings:underline ou prose-a:text-blue-600 sont enregistrés, mais dans la version actuelle ils sont compilés sans leur sélecteur d’élément. L’utilitaire s’applique donc à tout le conteneur prose, et non aux titres ou liens qu’il contient (#10). En attendant le correctif, stylisez ces éléments avec vos propres CSS.

Il s’agit d’un portage TailwindCSS de v4. Certains comportements propres à v3 du plugin d’origine — le mode sombre avec sélecteur .dark et certains formats de configuration de variantes d’éléments — fonctionnent différemment dans v4 et ne sont pas pris en charge ici ; utilisez plutôt le modificateur prose-invert et les variantes v4.

Consultez Plugins pour la directive @plugin et les détails du chargement.