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:

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:

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

Tema Warna

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

Inversi

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

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

$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). 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 untuk direktif @plugin dan detail pemuatan.