Plugin de tipografia

@tailwindcss/typography é uma versão 1:1 PHP do plugin oficial de tipografia. Ele adiciona a classe prose e seus modificadores, que aplicam padrões tipográficos legíveis a um bloco de HTML renderizado — títulos, parágrafos, listas, citações em bloco, código, tabelas e muito mais — sem precisar estilizar cada elemento manualmente.

Uso

Carregue o plugin com @plugin e importe a camada de utilitários; depois, aplique prose ao contêiner que envolve seu conteúdo:

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

A regra .prose gerada define propriedades personalizadas --tw-prose-* (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes e outras) e estiliza os elementos descendentes por meio delas.

Classes

Tamanhos

Os modificadores de tamanho ajustam toda a escala tipográfica. Eles são aplicados junto com a classe base prose:

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

Temas de cor

Os modificadores de cor substituem a escala de cinza usada no texto do corpo, nos títulos e nas bordas:

Inverter

prose-invert inverte a paleta de cores para uso em fundos escuros. Combine-o livremente com modificadores de tamanho e cor:

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

Opções

className

Por padrão, o plugin gera a classe prose. Defina className para renomeá-la — os modificadores acompanham o novo nome (markdown, markdown-lg, markdown-invert, …). Quando definido, as classes prose não são geradas:

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

Observações

Modificadores de elemento como prose-headings:underline ou prose-a:text-blue-600 são registrados, mas na versão atual são compilados sem o seletor de elemento, então o utilitário é aplicado ao contêiner prose inteiro em vez de aos títulos ou links dentro dele (#10). Estilize esses elementos com seu próprio CSS até que a correção seja lançada.

Esta é uma versão TailwindCSS v4. Alguns comportamentos específicos de v3 do plugin original — o modo escuro com seletor .dark e certos formatos de configuração de variantes de elemento — funcionam de outra forma em v4 e não são compatíveis aqui; use o modificador prose-invert e as variantes v4.

Consulte Plugins para ver a diretiva @plugin e os detalhes de carregamento.