Halo teman-teman semuanya! Setelah sebelumnya kita membahas tentang custom breakpoints, sekarang kita akan belajar tentang salah satu plugin resmi yang sangat bermanfaat di Tailwind CSS, yaitu Typography Plugin — atau yang juga dikenal dengan nama @tailwindcss/typography.
Plugin ini mempermudah kita dalam menata konten teks panjang seperti artikel, blog post, dokumentasi, dan lain sebagainya, agar tampilannya langsung indah dan siap produksi tanpa banyak menulis utility class secara manual.
Apa Itu Typography Plugin?
Typography Plugin memberikan utility bernama prose yang secara otomatis memberikan gaya pada elemen-elemen teks seperti <p>, <h1>, <ul>, <blockquote>, dan seterusnya, dengan tampilan yang rapi dan estetis.
1. Cara Mengaktifkan Plugin (Tailwind v4)
Di Tailwind CSS versi 4, kita tidak lagi menggunakan file tailwind.config.js seperti versi sebelumnya. Sebagai gantinya, kita cukup menggunakan directives di dalam CSS kita.
Berikut adalah langkah mengaktifkan Typography Plugin di Tailwind v4:
@import "tailwindcss";
@plugin "@tailwindcss/typography";
💡 Catatan:
Direktif @plugin ini hanya berfungsi saat kita menggunakan Tailwind melalui CLI (bukan versi CDN). Jadi pastikan proyek kita sudah menggunakan setup dengan CLI.
2. Class prose dan Variasinya
Setelah plugin aktif, kita bisa menggunakan class prose pada elemen untuk mendapatkan tampilan teks yang otomatis terformat dengan baik.
Tailwind menyediakan beberapa variasi:
| Class |
Fungsi |
prose |
Default styling untuk artikel |
prose-sm |
Versi kecil |
prose-lg |
Versi besar |
prose-xl |
Versi sangat besar |
prose-invert |
Gaya gelap (untuk dark mode) |
prose-red, dll |
Warna aksen berbeda untuk heading |
3. Contoh Elemen yang Diatur oleh prose
Berikut beberapa elemen HTML yang otomatis diberi gaya oleh class prose:
- Judul (
<h1>, <h2>, dst)
- Paragraf (
<p>)
- Gambar (
<img>)
- Tabel (
<table>)
- Daftar (
<ul>, <ol>)
- Kutipan (
<blockquote>)
- Code block (
<pre>, <code>)
Contoh Lengkap: Artikel dengan Class prose
Berikut adalah contoh kode HTML lengkap yang menggunakan Typography Plugin:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Contoh Typography Plugin</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- CDN tidak bisa menggunakan @plugin -->
<!-- Untuk CLI-only setup, gunakan: -->
<!--
@import "tailwindcss";
@plugin "@tailwindcss/typography";
-->
</head>
<body class="bg-gray-50 p-6">
<article class="prose max-w-2xl mx-auto bg-white p-6 rounded-lg shadow">
<h1>Judul Artikel yang Menarik</h1>
<p>Ini adalah paragraf pembuka. Dengan Tailwind Typography Plugin, kita tidak perlu menulis banyak class karena semuanya sudah diatur dengan rapi.</p>
<h2>Subjudul Kedua</h2>
<p>Paragraf ini adalah bagian dari konten yang lebih panjang. Kita juga bisa membuat <strong>teks tebal</strong>, <em>teks miring</em>, dan menyisipkan <code>code</code> inline.</p>
<blockquote>
Ini adalah kutipan penting dari seseorang yang bijak.
</blockquote>
<ul>
<li>Poin pertama</li>
<li>Poin kedua</li>
<li>Poin ketiga</li>
</ul>
<pre><code>const hello = "Hello World";</code></pre>
</article>
</body>
</html>
⚠️ Catatan:
Typography Plugin tidak bisa digunakan via CDN. Untuk menggunakan class prose, kita harus menggunakan Tailwind via CLI dan menambahkan @plugin "@tailwindcss/typography"; di CSS kita.
Kesimpulan
Typography Plugin dari Tailwind CSS adalah alat yang sangat praktis untuk menata konten teks panjang secara otomatis dan profesional.
Kita cukup menambahkan class prose, dan semua elemen teks seperti heading, paragraf, tabel, dan kutipan akan terlihat rapi tanpa perlu menulis banyak class manual.
Terima Kasih