Main Menu

Belajar Tailwind CSS Dasar #11: Typography Plugin


👍 0 ❤️ 0 💡 0 🔥 0 🙌 0 🥳 0
Belajar Tailwind CSS Dasar #11: Typography Plugin

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


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami