Plugin di tipografia

@tailwindcss/typography è un port 1:1 PHP del plugin tipografico ufficiale. Aggiunge la classe prose e i relativi modificatori, che applicano impostazioni tipografiche predefinite e leggibili a un blocco HTML renderizzato — titoli, paragrafi, elenchi, citazioni, codice, tabelle e altro — senza dover applicare uno stile a ogni elemento manualmente.

Utilizzo

Carica il plugin con @plugin e importa il livello delle utility, quindi applica prose al contenitore che racchiude i tuoi contenuti:

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 regola .prose generata definisce --tw-prose-* proprietà personalizzate (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes e altre) e applica stili agli elementi discendenti tramite queste proprietà.

Classi

Dimensioni

I modificatori di dimensione ridimensionano l'intera scala tipografica. Si applicano insieme alla classe base prose:

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

Temi di colore

I modificatori di colore sostituiscono la scala di grigi usata per il testo del corpo, i titoli e i bordi:

Inversione

prose-invert inverte la palette di colori per l'uso su sfondi scuri. Combinalo liberamente con i modificatori di dimensione e colore:

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

Opzioni

className

Per impostazione predefinita, il plugin genera la classe prose. Imposta className per rinominarla: i modificatori seguiranno il nuovo nome (markdown, markdown-lg, markdown-invert, …). Se impostato, le classi prose non vengono generate:

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

Note

I modificatori degli elementi come prose-headings:underline o prose-a:text-blue-600 sono registrati, ma nella versione corrente vengono compilati senza il selettore dell'elemento, quindi l'utility si applica all'intero contenitore prose invece che ai titoli o ai link al suo interno (#10). Applica stili a quegli elementi con il tuo CSS finché il problema non sarà risolto.

Questa è una versione TailwindCSS v4. Alcuni comportamenti specifici di v3 del plugin originale — la modalità scura con selettore .dark e alcuni formati di configurazione delle varianti degli elementi — funzionano diversamente in v4 e non sono supportati qui; usa invece il modificatore prose-invert e le varianti v4.

Consulta Plugin per la direttiva @plugin e le istruzioni di caricamento.