Optimasi Produksi: Cara Memperkecil Ukuran File CSS Anda dengan Tailwind (Part 11)

Rifqi An Rifqi An
•
Maret 07, 2026


Optimasi Produksi: Cara Memperkecil Ukuran File CSS Anda dengan Tailwind (Part 11)

Halo, para pejuang keyboard! Pernah nggak sih ngerasa pas lagi ngoding dengan Tailwind CSS, kok ukuran file CSS hasil *build* pas mode produksi bisa *gede banget* kayak dompet habis gajian? Udah pakai utility class yang katanya ringkas, tapi kok pas dicek, ukurannya bikin deg-degan kayak nunggu hasil *deploy*? Tenang, Bro/Sist! Di artikel ke-11 seri Belajar Tailwind CSS ini, kita akan bongkar rahasia di balik perut buncit file CSS dan bagaimana Tailwind punya jurus ampuh buat "ngurusin" dia biar *sat-set* diakses user. Siap-siap file CSS kita jadi lebih ramping dari model majalah!

Daftar Isi

Kenapa File CSS Kita Gendut Banget Sih, Bro?

Oke, mari kita jujur. Salah satu "kelemahan" (kalau boleh dibilang kelemahan) dari framework CSS utility-first kayak Tailwind adalah dia bawa semua utility class yang dia punya. Bayangin, ada ribuan class dari flex sampai z-50, dari text-red-500 sampai bg-indigo-900, dan banyak lagi yang lain. Walaupun kamu cuma pakai sebagian kecilnya di proyekmu, secara default semua class itu tetap "dibawa" ke file CSS hasil build kamu. Ibaratnya, kamu cuma mau masak mie instan, tapi kamu bawa semua peralatan dapur dari pisau chef sampai blender industri. Gendut kan?

Ini bukan bug ya, ini memang cara kerja Tailwind biar kita bisa ngoding cepat di fase development tanpa mikir ini-itu. Tapi jelas, kalau pas produksi semua class nggak terpakai ini ikut kebawa, website kita jadi berat dan loadingnya bisa bikin user ngantuk duluan. Nggak mau kan website jualan kopi kita kalah cepat dari warung sebelah cuma gara-gara file CSS yang obesitas?

Jurus Ampuh Tailwind Buat Kurusin CSS: PurgeCSS!

Nah, di sinilah keajaiban PurgeCSS (yang sekarang sudah terintegrasi ke dalam Tailwind via konfigurasi content) bekerja! Apa itu PurgeCSS? Gampangnya, PurgeCSS ini adalah tukang bersih-bersih profesional yang bertugas menyisir semua file kode kamu (HTML, JavaScript, Vue, React, Svelte, dsb.) dan mencari tahu class Tailwind mana saja yang beneran kamu pakai. Class yang nggak ketemu di kodinganmu? Langsung dibuang! Dieksekusi tanpa ampun!

Hasilnya? File CSS kamu yang tadinya berat ratusan KB (bahkan MB!), bisa jadi cuma belasan atau puluhan KB doang. Ramping, ringan, dan cepat! Ini bener-bener game changer buat optimasi performa website kita di mode produksi.

Cara Konfigurasi PurgeCSS (Sekarang Pakai content) di Tailwind

Untuk Tailwind CSS versi 3 ke atas, konsep PurgeCSS ini sudah di-handle langsung melalui properti content di file tailwind.config.js kamu. Jadi nggak perlu lagi instal library PurgeCSS terpisah. Cukup kasih tahu Tailwind, di mana saja dia harus mencari class-class yang kamu pakai.

Biasanya, file tailwind.config.js kamu akan terlihat mirip seperti ini:


// tailwind.config.js
/** <code>@type {import('tailwindcss').Config}</code> */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}", // Ini penting! Tailwind akan scan semua file di folder src
    "./public/index.html", // Atau file HTML utama lainnya
    // Kalau ada folder lain yang berisi class Tailwind, tambahkan di sini juga
    // "./components/**/*.{js,jsx}", 
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Perhatikan bagian content. Itu adalah array yang berisi daftar lokasi file yang akan "dipindai" oleh Tailwind. Kamu perlu memastikan semua file di proyekmu yang mungkin berisi class Tailwind (misalnya file HTML, JSX, Vue, dsb.) tercakup di sini. Kalau ada class yang kamu pakai tapi nggak terdeteksi karena lokasinya nggak masuk di array content, class itu akan ikut terhapus dan tampilan website kamu bisa amburadul! Hati-hati ya, jangan sampai salah alamat!

Efek Magisnya Setelah "Dikurusin"

Setelah kamu mengonfigurasi content dengan benar dan menjalankan build untuk mode produksi (misalnya dengan npm run build atau perintah build proyek framework kamu), kamu akan melihat perbedaan ukuran file CSS yang signifikan. Dari yang tadinya mungkin 2MB, bisa jadi cuma 20KB! Ini dia efek magisnya:

  • Loading Lebih Cepat: Pengunjung website kamu nggak perlu nunggu lama buat ngelihat tampilan utuh.
  • Hemat Bandwidth: Penting banget, apalagi buat user dengan koneksi internet yang pas-pasan atau paket data terbatas.
  • Skor Lighthouse Meningkat: Ini yang disukai Google! Website yang cepat loadingnya cenderung dapat skor SEO yang lebih baik.

Ingat, proses "pengurusan" ini hanya terjadi saat kamu membuat build untuk produksi. Di mode development, Tailwind akan tetap menyertakan semua class agar kamu bisa ngoding dengan leluasa dan Hot Module Reload (HMR) tetap berjalan lancar. Jadi, jangan kaget kalau di mode dev file CSS-nya tetap gede ya!

Tips Tambahan Biar CSS Makin Ramping (Tapi Tetap Cantik)

Walaupun PurgeCSS sudah sangat membantu, ada beberapa kebiasaan baik yang bisa kita terapkan biar file CSS makin efisien:

  1. Gunakan Komponen: Kalau kamu punya blok UI yang berulang dengan banyak class Tailwind, pertimbangkan untuk membungkusnya dalam sebuah komponen (misal React Component, Vue Component, atau bahkan custom CSS component dengan @apply) daripada menulis class yang sama berulang kali.
  2. Hapus Class Tidak Terpakai: Ini sih wajib! Jangan malas membersihkan kode. Class Tailwind yang sudah tidak dipakai, mending dihapus saja. Walaupun PurgeCSS akan membersihkannya di produksi, kode yang bersih tetap lebih enak dibaca dan dikelola.
  3. Tinjau Customisasi Tailwind: Kalau kamu banyak menambah custom class atau plugin di tailwind.config.js, pastikan semua itu memang terpakai. Kalau nggak, mending dihapus saja.

Dengan kombinasi PurgeCSS dan kebiasaan ngoding yang baik, file CSS kamu akan selalu optimal, ringan, dan tetap cantik!

Latihan Ngoding Ngakak: Proyek "Warung Kopi Online Anti-Overload"

Bayangkan kamu adalah satu-satunya programmer di startup "Kopi Mantap Jiwa". Bos kamu (yang suka banget bilang "pokoknya website kita harus paling cepat dari semua warung kopi online lain!") baru saja ngamuk-ngamuk karena skor Lighthouse website jualan kopi kita jeblok gara-gara file CSS-nya yang bengkak sampai 5MB. User jadi lama nungguin gambar kopinya muncul.

Padahal, kamu cuma pakai sedikit class Tailwind, tapi karena lupa setting content di tailwind.config.js, semua utility Tailwind dari A sampai Z ikut masuk ke produksi. Sekarang, bos ngasih kamu ultimatum: "Besok pagi skor Lighthouse harus hijau semua, kalau nggak... gaji bulan ini dipotong buat beli kopi!"

Tugas Kamu:

  1. Buatlah file tailwind.config.js sederhana.
  2. Tambahkan konfigurasi content yang benar agar Tailwind hanya menyertakan class yang dipakai di file index.html dan semua file .js di folder src/.
  3. Bayangkan kamu punya file src/index.html dan src/components/Navbar.js. Tulis contoh kode untuk properti content saja di tailwind.config.js kamu.

Ini dia contoh strukturnya:


// Struktur proyekmu
// my-kopi-project/
// ├── public/
// │   └── index.html
// └── src/
//     ├── App.js
//     └── components/
//         └── Navbar.js
// └── tailwind.config.js
// └── package.json

Kirim jawabanmu ke grup chat tim, biar bos nggak jadi potong gaji! (Jangan lupa ngopi biar fokus ya!)

Gimana, Bro/Sist? Sekarang udah tahu kan gimana caranya biar file CSS Tailwind kita nggak lagi gendut dan bikin website lemot? Ini adalah salah satu teknik paling penting dalam optimasi performa web, apalagi saat masuk ke tahap produksi. Di bagian selanjutnya, kita akan coba eksplorasi lagi fitur-fitur keren lainnya dari Tailwind CSS yang bisa bikin ngoding makin asyik dan efisien!

Sampai jumpa di artikel selanjutnya! Jangan berhenti ngoding!

Bagikan Artikel Ini