Seni Diet Ekstrem: Optimasi Produksi (Purging)
Pernah melihat sebuah file CSS biasa ukurannya mencapai 10 Megabyte (10,000 KB)? Itulah
yang terjadi jika kamu meluncurkan Tailwind CSS dalam Mode Pengembangan (*Development Mode*). Karena
Tailwind secara harfiah mencetak puluhan ribu probabilitas warna, margin, dan *breakpoin* di seluruh planet
ini.
Untuk meluncurkan ke Dunia Nyata (*Production*), kita harus memerintahkan compiler untuk Menyapuh
Bersih (Purging) 99% kelas CSS yang tidak kita gunakan di halaman HTML!
🧲 1. Mesin Pemindai Teks (The JIT Engine)
Bagaimana Tailwind tahu mana kelas CSS yang kita pakai dan mana yang nganggur? Ia melakukannya dengan memindai (scan) murni seluruh teks yang ada di dalam file-file proyekmu mencarinya sebuah string kata yang utuh.
Menulis String Utuh
Mesin mencintai kata yang ditulis penuh (unbroken).
<div class="bg-red-500 text-white">
Kesalahan Server!
</div>
.bg-red-500 dan .text-white dalam file CSS akhir.
Menyambung String di JS/PHP
Mesin Tailwind bukanlah penerjemah Javascript. Ia cuma mesin pencari teks bodoh (RegEx Regex).
// Jangan pernah memecah nama utilitas!
let color = 'red';
<div class="bg-${color}-500">
...
</div>
bg-red-500 karena ia tidak pernah menemukan kata utuh
tersebut tertulis dalam dokumen! Tombolmu akan mendadak kehilangan warna!
🎯 2. Menentukan Target Sapuan (Content Paths)
Supaya Tailwind bisa menjalankan tugas "Bersih Besih" ini, kita wajib memberitahu DI FILE MANA
SAJA ia harus mencari tulisan class. Ini dilakukan di array content pada file
eksekutif `tailwind.config.js`.
module.exports = { // 🚨 INI SANGAT KRUSIAL! 🚨 content: [ "./src/**/*.{html,js,jsx,ts,tsx}",# React/Next.js "./app/Views/**/*.php", # Jika kamu pakai CodeIgniter (PHP) "./resources/views/**/*.blade.php",# Jika kamu pakai Laravel (PHP) ], theme: { extend: {}, }, plugins: [], }
Peringatan Keras Dunia Nyata
90% keluhan "Bang, pas di komputer saya CSS-nya ada, pas di-*deploy* ke Vercel/Hosting jadi hilang
berantakan!" adalah karena Programmer LUPA memasukkan *path* rute direktori folder
spesifik (seperti ./components/*.js) ke dalam array
Content di atas.
🔒 3. Safelisting (Pengecualian Sapu Jagat)
Jika ada kasus di mana kamu BENAR-BENAR TERPAKSA meramu *string* warna secara dinamis dengan variabel di Database (misal: CMS Admin mendefinisikan warna tombol khusus di panel Admin), Tailwind memperbolehkanmu melindungi string utuh tersebut agar tidak tersapu oleh *purge*!
Perlindungan Sakti (Safelist)
Paksa Tailwind untuk menyertakan daftar kelas-kelas ini masuk ke CSS tahap akhir (*Production Build*), tak peduli ia sungguh ada tertulis di dalam file HTML atau tidak.
module.exports = {
content: [...],
safelist: [
'bg-red-500',
'text-3xl',
// Atau pola Regex keren:
{ pattern: /bg-(red|green|blue)-(100|500)/ }
]
}
🏆 Hasil Kemenangan Optimasi:
MB
Development
Production Build
Sebuah file CSS raksasa kini termampatkan menjadi sepucuk surat elektronik yang besarnya lebih ringan daripada 1 buah foto *icon/favicon* sekalipun! Web-mu akan melesat memuat halamannya secara instan (0 detik kelambanan visual).