Penyelamat Blogger: Plugin Typography (`prose`)
Tailwind secara bawaan me-reset ("Preflight") semua gaya HTML. Artinya, tulisan raksasa
<h1> ukurannya sama persis seperti paragraf kecil <p>. Padahal, kita
sering menerima konten artikel mentah dari luar (Misal: Dari WordPress CMS atau format Markdown
`article.md`) yang tidak memiliki class Tailwind di dalamnya.
Solusi Resminya: Pasang @tailwindcss/typography
dan cukup lemparkan mantra class="prose"!
🏚️ 1. Realita Pait: Teks Tanpa Class
Coba perhatikan simulasi konten mentah asli HTML (hasil render Markdown) di bawah ini jika diletakkan di dalam kontainer putih biasa Tailwind tanpa bantuan Plugin:
Judul Artikel Besar (H1)
Ini adalah paragraf pembuka artikel. Ada juga tulisan miring italic dan tulisan tebal bold. Mengingat preflight hidup, H1 di atas sama besarnya seperti ini.
Sub-Judul Menarik (H2)
- Soto Ayam
- Bawang Goreng
"Pesan bijaksana dalam kotak." - Orang Pintar
// Bahkan Bullet <ul> <li> menghilang karena di-reset Tailwind!
🪄 2. Menyewa Penata Paragraf: class="prose"
Setelah kita meng-instal modul bawaan di Terminal (`npm install @tailwindcss/typography`) dan mendaftarkannya,
kita hanya perlu menambahkan satu jubah prose di Parent div terluar dari blok HTML murni kita.
Seluruh isi secara rekursif hingga ke akar terdalam akan diatur margin dan ukurannya dengan keindahan rasio
emas!
Judul Artikel Besar (H1)
Ini adalah paragraf pembuka artikel. Ada juga tulisan miring italic dan tulisan tebal
bold. Mengingat preflight ditimpa ulang prose, H1 di atas terlahir kembali
mulia.
Sub-Judul Menarik (H2)
- Soto Ayam
- Bawang Goreng
"Pesan bijaksana dalam kotak." - Orang Pintar
<div class="prose">
<h1>...</h1> <p>...</p>
</div>
🎨 3. Mewarnai dan Memodifikasi modifier Prose
Tentu akan sangat aneh jika artikel blog kita berbahasa warna bawaan abu-abu-hitam saat (*branding theme*)
seluruh warna utama situs kita adalah Zamrud (Emerald). Plugin ini cukup pintar!
Gunakan warna kustom seperti prose-emerald, atau
terapkan mode Hitam Pekat dengan modifier canggih dark:prose-invert.
Skema Zamrud
prose-emerald
Tema Malam (Invert)
dark:prose-invert
Luar Angkasa
Kegelapan tak ubahnya sebuah kertas kosong luas.
Cahaya adalah seniman, kegelapan adalah kanvasnya.
🎓 Merombak Anggota Spesifik
Bagaimana jika kamu hanya ingin membuat elemen <img> di dalam class="prose"
melengkung (rounded)? Kamu tidak perlu menyentuh file CSS!
prose-img:rounded-2xl