# Plugin Tipografi

`@tailwindcss/typography` adalah port 1:1 PHP dari plugin tipografi resmi. Plugin ini menambahkan kelas `prose` beserta modifier-nya, yang menerapkan gaya tipografi bawaan agar mudah dibaca pada blok HTML yang dirender — judul, paragraf, daftar, kutipan blok, kode, tabel, dan lainnya — tanpa perlu menata setiap elemen secara manual.

## Penggunaan

Muat plugin dengan `@plugin` dan impor lapisan utilitas, lalu terapkan `prose` pada kontainer yang membungkus konten Anda:

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

Aturan `.prose` yang dihasilkan menetapkan `--tw-prose-*` properti kustom (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes`, dan lainnya) dan menata elemen turunannya melalui properti tersebut.

## Kelas

### Ukuran

Modifier ukuran menskalakan seluruh rentang tipografi. Modifier ini diterapkan bersama kelas dasar `prose`:

| Kelas | Tujuan |
|-------|---------|
| `prose` | Ukuran bawaan |
| `prose-sm` | Kecil |
| `prose-base` | Dasar |
| `prose-lg` | Besar |
| `prose-xl` | Ekstra besar |
| `prose-2xl` | 2× ekstra besar |

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

### Tema Warna

Modifier warna mengganti skala abu-abu yang digunakan untuk teks isi, judul, dan border:

| Kelas | Tema |
|-------|-------|
| `prose-slate` | Slate |
| `prose-gray` | Abu-abu |
| `prose-zinc` | Zinc |
| `prose-neutral` | Netral |
| `prose-stone` | Stone |

### Inversi

`prose-invert` membalik palet warna untuk digunakan pada latar gelap. Padukan dengan bebas bersama modifier ukuran dan warna:

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

## Opsi

### `className`

Secara bawaan, plugin membuat kelas `prose`. Tetapkan `className` untuk mengganti namanya — modifier akan mengikuti nama baru (`markdown`, `markdown-lg`, `markdown-invert`, …). Jika ditetapkan, kelas `prose` tidak dibuat:

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

## Catatan

Modifier elemen seperti `prose-headings:underline` atau `prose-a:text-blue-600` didaftarkan, tetapi dalam rilis saat ini modifier tersebut dikompilasi tanpa selector elemennya, sehingga utilitas diterapkan pada seluruh kontainer `prose` alih-alih hanya pada judul atau tautan di dalamnya ([#10](https://github.com/inline0/tailwindphp/issues/10)). Tata elemen tersebut dengan CSS Anda sendiri sampai perbaikannya tersedia.

Ini adalah port TailwindCSS v4. Beberapa perilaku spesifik v3 dari plugin asli — mode gelap selector `.dark` dan format konfigurasi varian elemen tertentu — bekerja berbeda di v4 dan tidak didukung di sini; gunakan modifier `prose-invert` dan varian v4 sebagai gantinya.

Lihat [Plugin](https://tailwindphp.inline0.dev/id/docs/plugins) untuk direktif `@plugin` dan detail pemuatan.