Belajar Tailwind CSS - Plugins & Extending Tailwind

#Pendahuluan

Ketika utility bawaan tidak cukup, Tailwind menyediakan sistem plugin untuk memperluas dirinya. Episode 9 membahas tiga jenis plugin: utility, component, dan variant — lalu memanfaatkan plugin official, dan mengenal ecosystem publik yang siap pakai.

Plugin adalah batas antara "konfigurasi" dan "kode". Untuk token sederhana, cukup theme.extend. Untuk perilaku baru seperti variant atau utility dengan logika, plugin adalah jawabannya. Kalian juga akan belajar membaca plugin orang lain dengan lebih mudah setelah menulis plugin sendiri.

#Menulis Plugin Custom

#Plugin Utility

Plugin utility menambahkan kelas baru melalui addUtilities:

Plugin utility

const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".content-auto": {
          "content-visibility": "auto",
        },
        ".text-balance": {
          "text-wrap": "balance",
        },
      });
    }),
  ],
};

Setelah itu .content-auto dan .text-balance tersedia seperti utility bawaan, termasuk bisa diberi prefix variants seperti hover:text-balance.

#Plugin Component

Plugin component menambahkan kelas yang berdiri di layer components:

Plugin component

plugin(function ({ addComponents }) {
  addComponents({
    ".btn": {
      "@apply inline-flex items-center rounded px-4 py-2": {},
    },
  });
});

addComponents menempatkan kelas ke @layer components, sehingga tetap bisa ditimpa utility inline. Bentuk "@apply ...": {} memakai direktif @apply di dalam plugin.

#Plugin Variant

Plugin variant menambahkan prefix state baru lewat addVariant:

Plugin variant

plugin(function ({ addVariant }) {
  addVariant("optional", "&:optional");
});

Kini optional:border-amber-500 bisa dipakai pada elemen form dengan atribut optional. Variant custom seperti ini sangat membantu saat desain sistem punya state unik yang tidak disediakan Tailwind.

#Plugin Official

Beberapa plugin resmi yang paling bermanfaat:

• @tailwindcss/forms — mereset dan menyelaraskan styling input, select, dan textarea antar browser.
• @tailwindcss/typography — utility prose untuk konten kaya seperti artikel atau dokumentasi.
• @tailwindcss/aspect-ratio — kontrol rasio aspek deterministik (sudah jadi core di versi baru).
• @tailwindcss/line-clamp — membatasi jumlah baris teks (sudah jadi core sejak 3.3).
• @tailwindcss/container-queries — memungkinkan styling berdasarkan ukuran container (dibahas di episode 16).

Memasang dan mendaftarkannya:

npm install -D @tailwindcss/forms @tailwindcss/typography

Mendaftarkan plugin

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx}"],
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};

Setelah terdaftar, kelas prose dari typography langsung bisa dipakai:

Utility prose

<article class="prose prose-lg dark:prose-invert">
  <h1>Artikel</h1>
  <p>Konten markdown yang di-render otomatis mendapat gaya yang konsisten.</p>
</article>

#Ecosystem Publik

Ekosistem di sekitar Tailwind mempercepat pengembangan jauh melebihi framework itu sendiri:

• Tailwind UI — kumpulan komponen premium berbayar dari Tailwind Labs.
• Headless UI — komponen tak bergaya (menu, dialog, tabs) dengan aksesibilitas bawaan.
• Heroicons — ikon SVG yang dirancang agar cocok dengan estetika Tailwind.
• daisyUI — plugin yang menambahkan component classes siap pakai.
• shadcn/ui — komponen source-first yang disalin ke project kalian, memakai class-variance-authority.
• class-variance-authority (CVA) — API untuk mendefinisikan variants komponen (dibahas di episode 15).

#Penutup

Episode 9 memperluas Tailwind lewat plugin: menulis plugin utility, component, dan variant; memanfaatkan plugin official untuk form dan typography; serta mengenal ecosystem publik yang mempercepat development.

Inti yang harus dibawa pulang:

• addUtilities menambah kelas baru; addComponents menempatkan kelas di layer components.
• addVariant menambah prefix state baru.
• Plugin official diadopsi lewat npm install lalu didaftarkan di plugins.
• prose dari typography menstyling konten kaya secara konsisten.
• Cek ecosystem sebelum menulis kustom untuk menghindari kode tanpa pemilik.
• CVA menjadi jembatan menuju component API patterns di episode 15.

Di episode 10 selanjutnya kita akan membahas design tokens & integrasi dengan design system — menyimpan token di config, mengeksposnya sebagai CSS variables, sinkronisasi dari Figma, dan membangun library komponen yang konsisten dan bisa dipublikasikan.