Maksimalisasi Performa: JIT Mode & Plugins Penting di Tailwind CSS (Part 10)

Rifqi An Rifqi An
•
Maret 06, 2026


Maksimalisasi Performa: JIT Mode & Plugins Penting di Tailwind CSS (Part 10)

Waduh, nggak kerasa ya kita udah sampai di Part 10 dari seri Tailwind CSS ini! Kalau kemarin-kemarin kita asyik eksplorasi utility classes dan responsivitas, kali ini kita mau ngebutin performa dan nambahin "amunisi" pakai plugins penting. Siap-siap, karena setelah ini ngoding CSS bakal makin cepat, file makin kecil, dan hidup sebagai programmer makin ceria (walaupun tetep ada drama bug, sih). Penasaran gimana Tailwind bisa "ngegas" performa dan kasih kita super power tambahan? Yuk, kita bedah!

Daftar Isi

Bye-bye, PurgeCSS! Hello, JIT Mode!

Dulu, zaman baheula (ya nggak baheula banget, sih, cuma beberapa tahun lalu), kalau kita ngoding pakai Tailwind CSS, hasil *build* CSS-nya itu gede banget. Kenapa? Karena semua utility class yang mungkin kita pakai itu dibundel jadi satu. Nah, untuk bikin file CSS-nya kecil di produksi, kita perlu pakai *tool* tambahan namanya PurgeCSS. PurgeCSS ini tugasnya "nyapu" semua CSS yang nggak kepakai. Ibaratnya, kita belanja di supermarket, semua barang kita masukin troli, terus di kasir baru deh dibuangin yang nggak perlu. Ribet, kan?

Nah, di Tailwind CSS v2.1, lahirlah sang penyelamat: JIT Mode (Just-In-Time Mode)! Ini beneran revolusi, gengs. Kalau dulu kita harus nunggu PurgeCSS selesai kerja, sekarang dengan JIT mode, Tailwind itu *ngompile* CSS-nya on-demand. Jadi, dia cuma bikin CSS yang bener-bener kita pakai di HTML atau komponen JS kita, saat itu juga!

Manfaatnya apa? Banyak banget!

  • Sangat Cepat: Proses kompilasi jauh lebih cepat, bahkan saat development. Nggak ada lagi drama nungguin build yang lemot.
  • Ukuran File Kecil dari Awal: File CSS yang dihasilkan udah otomatis kecil, nggak perlu lagi PurgeCSS di belakang layar. Hemat *bandwidth* user, website makin ngebut!
  • Fleksibilitas Tanpa Batas: Kamu bisa pakai kombinasi utility class apapun, bahkan bikin class kustom dengan nilai *arbitrary* (misalnya w-[340px] atau top-[15%]) tanpa perlu pusing mikirin konfigurasi tambahan.

Pokoknya, JIT Mode ini kayak upgrade processor buat Tailwind kamu. Dari yang tadinya pakai Pentium 1, langsung loncat ke Ryzen Threadripper!

Instalasi dan Konfigurasi JIT Mode (dan Sekuelnya)

Untuk mengaktifkan JIT Mode ini gampang banget kok.

Kalau kamu masih pakai Tailwind CSS v2.x (meskipun disarankan banget buat upgrade), kamu cukup tambahkan properti mode: 'jit' di file tailwind.config.js kamu:


// tailwind.config.js (untuk Tailwind CSS v2.x)
module.exports = {
  mode: 'jit', // Ini nih kuncinya!
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // ... file-file lain yang berisi utility class Tailwind
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tapi, kalau kamu udah pakai Tailwind CSS v3.x ke atas, ada kabar gembira! JIT Mode itu udah jadi default! Jadi kamu nggak perlu lagi nulis mode: 'jit'. Malahan, properti purge diganti namanya jadi content.


// tailwind.config.js (untuk Tailwind CSS v3.x+)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [ // Ini pengganti 'purge' dan otomatis JIT!
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}', // Untuk proyek dengan folder src
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Pastikan array content (atau purge di v2) itu berisi path ke semua file yang mungkin mengandung utility class Tailwind kamu, seperti file HTML, JSX, TSX, atau bahkan Markdown (kalau pakai!). Kalau ini nggak di-set dengan benar, bisa-bisa CSS-nya nggak ke-*generate* dan tampilanmu jadi amburadul! Trust me, I've been there.

Menggali Plugins Penting di Tailwind CSS

JIT Mode udah bikin kita ngebut. Sekarang, gimana kalau kita mau nambahin fitur-fitur yang agak spesifik tanpa harus ngoding CSS dari nol? Nah, inilah gunanya *plugins*! Plugins di Tailwind CSS itu kayak *power-ups* di game. Mereka memungkinkan kita untuk menambah fungsionalitas, menambahkan utility class kustom, atau bahkan menambahkan base styles baru dengan sangat mudah.

Ada banyak plugin resmi yang dikembangkan oleh tim Tailwind Labs, dan juga banyak plugin komunitas. Kita akan bahas dua yang menurutku paling sering dipakai dan sangat membantu.

Plugin Wajib Punya: @tailwindcss/typography

Pernah nggak sih kamu lagi bikin blog atau halaman artikel, terus teks-teksnya itu kan cuma tag HTML biasa kayak <h1>, <p>, <ul>, tapi tampilannya kok jelek banget? Kalau mau di-styling pakai utility class Tailwind satu per satu, beuh, bisa keriting jari dan abis ngopi berapa gelas itu!

Nah, di sinilah @tailwindcss/typography datang sebagai pahlawan! Plugin ini menyediakan satu set class prose yang bisa langsung kamu apply ke sebuah container, dan secara otomatis akan memberikan styling yang indah dan konsisten untuk konten tipografi di dalamnya. Jadi, kamu nggak perlu lagi pusing mikirin line-height, margin paragraph, atau gaya list.

Instalasi:


npm install -D @tailwindcss/typography

Konfigurasi di tailwind.config.js:


// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'), // Tambahkan ini!
  ],
}

Penggunaan di HTML:


<div class="prose lg:prose-xl">
  <h1>Judul Artikel Keren Banget</h1>
  <p>Ini adalah paragraf pertama dari artikel yang sangat informatif.</p>
  <h2>Sub-Judul Penting</h2>
  <p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur adipiscing elit</em>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <ul>
    <li>Poin pertama</li>
    <li>Poin kedua</li>
    <li>Poin ketiga</li>
  </ul>
  <p>Kode di bawah ini contohnya:</p>
  <pre><code>console.log('Hello, Typography!');</code></pre>
</div>

Boom! Otomatis teks kamu jadi rapi dan profesional. Kamu juga bisa pakai varian seperti prose-sm, prose-lg, prose-xl, sampai prose-2xl untuk mengatur ukuran. Mantap, kan?

Plugin Serbaguna: @tailwindcss/forms

Oke, setelah teks sekarang giliran form. Kamu pasti sering kan ngelihat input field atau textarea di browser itu tampilannya beda-beda? Ada yang kotak kaku, ada yang sudutnya agak rounded. Belum lagi kalau mau di-styling biar seragam dan estetik, itu PR banget!

@tailwindcss/forms hadir untuk mengatasi masalah ini. Plugin ini menyediakan *reset* styling dasar untuk elemen form seperti <input>, <select>, <textarea>, dan lainnya. Jadi, semua form kamu akan punya tampilan dasar yang konsisten di semua browser, dan yang paling penting: *siap* untuk kamu berikan styling Tailwind tambahan sesuka hati tanpa perlu melawan gaya default browser yang bandel!

Instalasi:


npm install -D @tailwindcss/forms

Konfigurasi di tailwind.config.js:


// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'), // Ini juga jangan sampai lupa!
  ],
}

Penggunaan di HTML:


<form class="space-y-4">
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="anda@contoh.com">
  </div>
  <div>
    <label for="subject" class="block text-sm font-medium text-gray-700">Subjek</label>
    <select id="subject" class="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
      <option>Pertanyaan Umum</option>
      <option>Dukungan Teknis</option>
      <option>Saran & Kritik</option>
    </select>
  </div>
  <div>
    <label for="message" class="block text-sm font-medium text-gray-700">Pesan</label>
    <textarea id="message" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="Tulis pesan Anda di sini..."></textarea>
  </div>
  <button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
    Kirim Pesan
  </button>
</form>

Lihat kan? Dengan bantuan plugin ini, kamu nggak perlu nulis CSS aneh-aneh buat nge-reset form. Cukup tambahin utility class Tailwind yang kamu mau, dan semuanya langsung *blending* dengan indah. Hidup programmer makin gampang, waktu ngopi makin banyak!

Eksplorasi Lebih Jauh: Bikin Plugin Sendiri (Sekilas)

Selain pakai plugin yang sudah ada, kamu juga bisa lho bikin plugin sendiri! Ini berguna banget kalau kamu punya *design system* yang sangat spesifik atau kamu butuh utility class yang nggak ada di Tailwind secara default.

Contohnya, kamu mau nambahin utility class untuk text-shadow. Tailwind nggak punya itu secara bawaan. Dengan bikin plugin, kamu bisa nambahinnya dengan rapi.


// tailwind.config.js (contoh plugin sederhana)
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ... konfigurasi lainnya
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.text-shadow-sm': {
          textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
        },
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0, 0, 0, 0.15)',
        },
        '.text-shadow-lg': {
          textShadow: '0 4px 6px rgba(0, 0, 0, 0.2)',
        },
        '.text-shadow-none': {
          textShadow: 'none',
        },
      }
      addUtilities(newUtilities)
    }),
  ],
}

Dengan sedikit JavaScript dan pemahaman tentang API plugin Tailwind, kamu bisa bikin utility class, komponen, atau bahkan base style sesuai kebutuhanmu. Tapi ini materi yang agak advance, mungkin akan kita bahas di Part selanjutnya!

Latihan Ngoding Bareng (Studi Kasus Receh)

Oke, para pendekar koding! Setelah kita belajar JIT dan beberapa plugin sakti, saatnya kita praktekin.

Bayangkan kamu seorang junior developer di sebuah startup yang lagi dikejar deadline. PM (Project Manager) kamu tiba-tiba datang dengan wajah panik, "Tolong dong, bikinin halaman 'Hubungi Kami' yang estetik dan responsif buat besok pagi! Pokoknya harus keren, biar investor terkesima!"

Jangan panik! Kamu punya Tailwind CSS dengan JIT Mode dan pluginnya. Yuk, kita buat!

Tugas kamu:

  1. Buatlah halaman HTML sederhana untuk bagian "Hubungi Kami".
  2. Pastikan konfigurasi Tailwind CSS kamu sudah menggunakan JIT Mode (content di v3+).
  3. Gunakan @tailwindcss/forms untuk membuat form kontak (misalnya, input nama, email, subjek, dan textarea pesan) agar tampilannya konsisten dan mudah di-styling. Tambahkan juga tombol "Kirim Pesan".
  4. Gunakan @tailwindcss/typography untuk bagian deskripsi atau alamat perusahaan (misalnya, ada paragraf pembuka, list alamat, dll.) agar teksnya rapi dan profesional.
  5. Pastikan halaman dan form tersebut responsif. Cobalah gunakan utility class responsif Tailwind (seperti md:w-1/2, lg:flex, dll.) agar tampilannya tetap bagus di layar kecil maupun besar.
  6. Tambahkan sedikit sentuhan humor pada teks di halaman "Hubungi Kami" kamu, misalnya, "Hubungi kami sebelum kami kehabisan kopi!" atau "Ada saran fitur? Jangan ragu, kami suka ide gila!"

Ingat, kalau ada *error* atau *bug*, itu bukan kegagalan, tapi kesempatan buat belajar sambil ditemani secangkir kopi (atau teh, kalau kamu tim teh).

Gimana, makin seru kan ngoding pakai Tailwind CSS? Dengan JIT Mode, kita bisa ngebut tanpa beban. Dengan plugin, kita dapat super power tambahan untuk menyelesaikan masalah umum dengan elegan. Di part selanjutnya, kita akan mulai masuk ke topik yang lebih kompleks. Jangan sampai ketinggalan ya!

Sampai jumpa di Part 11!

Bagikan Artikel Ini