Plugin & Ekosistem Tailwind — Tailwind CSS

Tailwind memiliki ekosistem plugin yang memperluas kemampuannya. Plugin resmi: @tailwindcss/typography — styling prose/artikel otomatis: Judul Artikel…

Plugin adalah paket tambahan yang memberi Tailwind class baru, misalnya prose untuk merapikan artikel. Bayangin bor listrik. Tailwind itu bornya, lengkap dengan mata bor standar (p-4, flex, text-blue-600). Plugin itu mata bor tambahan: kamu beli dulu (npm install), lalu pasang ke bornya (@plugin). Mata bor yang cuma tergeletak di kotak gak bikin bornya bisa apa-apa.

🧪 Tebakan cepat: kamu sudah menjalankan npm install -D @tailwindcss/typography, lalu menulis <article class="prose">, tapi belum menambahkan baris @plugin di CSS. Apa yang terjadi? Tebak dulu, jawabannya ada di bagian "Memasang plugin: dua langkah".

Kenapa artikel kelihatan polos

Tailwind punya Preflight, reset CSS bawaan yang menghapus gaya default browser: h2 sebesar teks biasa, ul tanpa bullet, link sewarna teks. Buat komponen itu bagus, karena kamu menentukan semuanya lewat class. Tapi artikel dari Markdown atau CMS ditulis orang lain, jadi kamu gak bisa menaruh class di tiap h2 dan p-nya.

<article>
  <h2>Mulai dengan Tailwind</h2>
  <p>Tailwind memberi kamu <strong>class kecil</strong> untuk tiap gaya. Panduannya ada di <a href="#">dokumentasi resmi</a>.</p>
  <ul>
    <li>Pasang lewat npm</li>
    <li>Tulis class di HTML</li>
    <li>Jalankan build</li>
  </ul>
  <blockquote><p>Mulai kecil, rapikan belakangan.</p></blockquote>
</article>

Plugin @tailwindcss/typography (plugin resmi untuk konten HTML atau Markdown) menyelesaikannya dengan satu class di pembungkusnya: <article class="prose">. Semua elemen di dalamnya ikut dirapikan.

Elemen Tanpa prose (Preflight) Dengan prose
h2 16px, tebal biasa 24px, bold 700, jarak 24px di bawahnya
p nempel satu sama lain jarak 20px di antara blok
ul tanpa bullet bullet bulat, menjorok 26px
a sama dengan teks biasa garis bawah, weight 500
blockquote teks biasa miring, garis kiri 4px, tanda kutip

Teksnya 16px dengan line-height 28px, warnanya abu tua, dan lebarnya dibatasi 65ch (sekitar 65 huruf per baris) supaya enak dibaca.

Memasang plugin: dua langkah

npm install -D @tailwindcss/typography

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

Kalau baris @plugin belum ada, gak terjadi apa-apa. Gak ada error, artikelnya tetap polos. Tanpa @plugin, Tailwind gak kenal nama prose, jadi CSS-nya gak pernah dibuat. Class yang gak dikenal cuma jadi nama tanpa gaya. Itu jawaban tebakannya.

Mengatur prose

Plugin resmi lain: forms

@tailwindcss/forms mereset input, select, textarea dan checkbox jadi polos dan seragam di semua browser, supaya gampang diberi class: rounded-md border-gray-300 focus:border-blue-500. Pasangnya sama: npm install -D @tailwindcss/forms, lalu @plugin "@tailwindcss/forms";.

Beberapa plugin resmi lama sekarang sudah bawaan, jadi jangan dipasang lagi: aspect-ratio (aspect-video), line-clamp (line-clamp-3), dan container-queries (@container, @md:, bawaan sejak v4).

Gak semua butuh plugin: @utility

Butuh satu class kecil yang belum ada? Di v4, tulis sendiri dengan @utility di CSS, tanpa plugin:

@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

Sekarang class="scrollbar-hidden" menyembunyikan scrollbar, dan bisa dipakai dengan variant: md:scrollbar-hidden. Bayangan teks (text-shadow-lg), yang dulu sering dibuat lewat plugin sendiri, sudah bawaan sejak v4.1.

Tailwind v3: plugin di tailwind.config.js

Di proyek Tailwind v3, plugin didaftarkan di array plugins file config:

// tailwind.config.js (Tailwind v3)
module.exports = {
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
}

Tailwind v4 gak membaca file ini otomatis. Di v4, pakai @plugin di CSS. Proyek lama yang masih punya config bisa memuatnya dengan @config "./tailwind.config.js";.

Ekosistem: komponen siap pakai

⚠️ Jebakan yang sering ketemu

TL;DR: Plugin menambah class baru ke Tailwind. Pasang dua langkah: npm install -D @tailwindcss/typography, lalu @plugin "@tailwindcss/typography"; di CSS utama (v4). Tanpa @plugin, prose diam tanpa error. @tailwindcss/typography adalah plugin resmi untuk konten HTML atau Markdown: satu prose di pembungkus merapikan heading, paragraf, list, link dan kutipan. Atur dengan prose-lg, max-w-none, dark:prose-invert, prose-a:.... @tailwindcss/forms mereset elemen form. Class kecil sendiri cukup dengan @utility. Di v3, plugin ditulis di tailwind.config.js: plugins: [require("@tailwindcss/forms")]. Ekosistemnya: daisyUI (class komponen), Headless UI (perilaku tanpa gaya), shadcn/ui (kode yang disalin).

Yang akan kamu pelajari