# 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:

```php
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`:

| Classe | Finalidade |
|-------|---------|
| `prose` | Tamanho padrão |
| `prose-sm` | Pequeno |
| `prose-base` | Base |
| `prose-lg` | Grande |
| `prose-xl` | Extra grande |
| `prose-2xl` | 2× extra grande |

```html
<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:

| Classe | Tema |
|-------|-------|
| `prose-slate` | Ardósia |
| `prose-gray` | Cinza |
| `prose-zinc` | Zinco |
| `prose-neutral` | Neutro |
| `prose-stone` | Pedra |

### Inverter

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

```html
<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:

```php
$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](https://github.com/inline0/tailwindphp/issues/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](https://tailwindphp.inline0.dev/pt/docs/plugins) para ver a diretiva `@plugin` e os detalhes de carregamento.