Nggak Nulis CSS Sendiri buat Markdown, Saya Pasrahin ke @tailwindcss/typography

Semua konten di situs ini — blog post, case study portfolio — ditulis di Markdown, terus dirender jadi HTML mentah: h2, p, ul, blockquote, code block, macem-macem elemen yang saya sendiri nggak selalu inget muncul di mana. Saya nggak nulis CSS manual buat masing-masing elemen itu, dan saya sengaja nggak mau.

Sebelum saya pasang plugin ini, saya sempet coba styling manual selama beberapa hari di draft awal situs ini. Hasilnya persis kayak yang saya khawatirin: heading h2 keliatan bagus, tapi begitu ada post yang isinya nested list (list di dalam list), spacing-nya berantakan karena saya lupa handle margin buat elemen nested. Terus ada satu post yang butuh table buat perbandingan, dan table-nya keluar tanpa border sama sekali karena saya nggak pernah mikirin elemen itu bakal muncul. Setiap kali nemu masalah kayak gitu saya harus balik lagi ke CSS, dan itu jadi pola yang keulang terus tiap saya nulis post dengan struktur yang beda dari biasanya.

Solusinya

Plugin @tailwindcss/typography, dipasang lewat @plugin "@tailwindcss/typography" di global.css — di Tailwind v4 ini beda dari cara pasang plugin di v3 yang masih pakai tailwind.config.js, tapi konsepnya sama. Saya cuma bungkus output markdown dengan class prose di BlogPostBody.astro dan PortfolioDetailBody.astro, dan plugin ini otomatis nge-styling semuanya: heading hierarchy, spacing paragraf, list (nested atau nggak), blockquote, inline code, sampai table — konsisten di semua post tanpa saya nulis satu baris CSS custom buat itu.

Kenapa nggak custom aja dari awal

Karena kontennya markdown bebas, saya nggak bisa prediksi elemen apa yang bakal muncul di post yang saya tulis bulan depan. Kalau saya styling manual per komponen, saya pasti lupa handle elemen yang jarang dipake — yang saya udah buktiin sendiri lewat nested list dan table itu — dan hasilnya berantakan pas suatu saat elemen itu kepake beneran, biasanya pas saya lagi buru-buru publish sesuatu dan nggak sempet cek preview-nya baik-baik.

Yang tetap saya kustomisasi

Cuma warna link dan aksen, biar ngikutin --color-primary situs ini, lewat class tambahan kayak prose-a:text-primary dan beberapa modifier serupa buat heading. Sisanya saya biarin default dari plugin-nya, karena defaultnya udah cukup readable di light mode maupun dark mode — saya cek manual di kedua mode itu waktu pertama pasang, dan nggak nemu masalah kontras yang berarti.

Efek yang nggak saya sadari langsung: sejak pasang plugin ini, saya jadi lebih berani nulis markdown yang lebih variatif strukturnya — nested list, table perbandingan, blockquote buat kutipan — karena saya tahu semuanya bakal ke-render rapi tanpa saya perlu mikir ulang CSS-nya tiap kali. Kadang solusi paling efisien itu bukan nulis kode sendiri, tapi milih plugin yang udah nyelesain masalah yang sama buat ribuan situs lain sebelum saya nyoba nyelesain sendiri dari nol.