Optimasi Ukuran File CSS Tailwind dengan Purge & Build Production

Salah satu tantangan utama saat menggunakan Tailwind CSS adalah ukuran file CSS yang bisa sangat besar jika tidak dioptimasi. Hal ini disebabkan karena Tailwind menghasilkan ribuan kelas utilitas secara default. Namun, kamu tidak perlu khawatir — Tailwind telah menyediakan fitur bawaan untuk mengatasi masalah ini, yaitu PurgeCSS (atau mode content purge) dan proses build production. Melalui proses optimasi ukuran file CSS Tailwind, kamu bisa menghapus semua kelas yang tidak digunakan dalam proyekmu. Hasilnya? Ukuran file CSS menjadi sangat kecil, waktu loading situs lebih cepat, dan performa website meningkat signifikan. Dalam panduan ini, kita akan membahas langkah-langkah praktis untuk menerapkan purge dan build production agar Tailwind bekerja lebih efisien.

Mengapa File Tailwind CSS Bisa Sangat Besar

Secara default, Tailwind menghasilkan ribuan utilitas seperti text-lg, bg-blue-500, hover:shadow-md, dan lainnya. Semua utilitas ini dimasukkan ke dalam satu file CSS yang bisa mencapai ukuran >3 MB sebelum dikompresi.

Ukuran sebesar ini sebenarnya tidak dibutuhkan oleh proyekmu, karena mungkin kamu hanya memakai sebagian kecil dari kelas-kelas tersebut. Misalnya, jika hanya menggunakan sekitar 10% dari total kelas Tailwind, maka 90% sisanya hanya menambah beban tanpa manfaat.

Oleh karena itu, optimasi ukuran file CSS Tailwind dengan purge dan build production adalah langkah penting sebelum situsmu dipublikasikan ke server.

Apa Itu PurgeCSS di Tailwind

PurgeCSS adalah fitur bawaan Tailwind yang bertugas mencari dan menghapus kelas CSS yang tidak digunakan di dalam file HTML, JavaScript, atau framework front-end lainnya (seperti React, Vue, atau Laravel Blade).

Pada versi Tailwind CSS 2.0 ke atas, fitur ini sudah terintegrasi langsung dan tidak perlu menginstal library tambahan. Cukup tambahkan konfigurasi content di file tailwind.config.js.

Menyiapkan Konfigurasi Tailwind

Langkah pertama adalah memastikan proyekmu sudah menggunakan Tailwind CSS. Jika belum, kamu bisa menginstalnya menggunakan npm:

npm install -D tailwindcss
npx tailwindcss init

Perintah di atas akan membuat file konfigurasi bernama tailwind.config.js.
Kemudian, buka file tersebut dan tambahkan pengaturan content seperti ini:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Bagian content inilah yang menentukan di mana Tailwind harus mencari kelas CSS yang digunakan. Kamu bisa menyesuaikan path sesuai struktur proyekmu.

Cara Kerja Purge dalam Build Production

Ketika kamu menjalankan build production, Tailwind akan membaca semua file yang tercantum dalam content, lalu menganalisis kelas CSS yang digunakan di dalamnya. Hanya kelas-kelas tersebut yang akan disertakan dalam output CSS akhir.

Misalnya, jika hanya ada 50 kelas yang digunakan di seluruh proyek, Tailwind akan otomatis membuang ribuan kelas lainnya yang tidak terpakai.

Contoh perintah build production dengan Tailwind CLI:

npx tailwindcss -o ./dist/output.css --minify

Atau jika kamu menggunakan script di package.json:

"scripts": {
  "build": "npx tailwindcss -o ./dist/output.css --minify"
}

Kemudian jalankan dengan:

npm run build

Hasilnya, file CSS yang tadinya berukuran 3 MB bisa menyusut menjadi kurang dari 100 KB — perbedaan yang sangat signifikan untuk performa website.

Contoh Perbandingan Ukuran CSS

Berikut ilustrasi perbandingan sebelum dan sesudah proses purge dan build production:

Kondisi	Ukuran File	Keterangan
Tanpa Purge	± 3.5 MB	Semua kelas Tailwind disertakan
Dengan Purge	± 80 KB	Hanya kelas yang digunakan disimpan
Dengan Minify	± 40 KB	File sudah terkompres dan siap produksi

Bayangkan berapa banyak waktu loading yang bisa kamu hemat hanya dengan langkah sederhana ini!

Tips Menghindari Kelas Terhapus Secara Tidak Sengaja

Kadang Tailwind bisa menghapus kelas yang sebenarnya digunakan, terutama jika kamu menulis nama kelas secara dinamis di JavaScript. Misalnya:

const btnClass = "bg-" + color + "-500";

Karena Tailwind tidak bisa membaca string dinamis seperti itu, kelas ini mungkin terhapus saat build. Untuk mengatasinya, kamu bisa menggunakan safelisting di file konfigurasi Tailwind:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
  ],
}

Dengan begitu, kelas yang disebutkan dalam safelist akan tetap dipertahankan meskipun tidak terdeteksi secara langsung di file HTML.

Build Production Otomatis di Framework

Jika kamu menggunakan framework seperti Next.js, Laravel Mix, atau Vite, proses build production biasanya dilakukan otomatis saat menjalankan perintah build.

Contohnya di Laravel Mix (Webpack):

mix.postCss('resources/css/app.css', 'public/css', [
  require('tailwindcss'),
]);

Kemudian jalankan:

npm run production

Tailwind akan secara otomatis menghapus kelas yang tidak digunakan sesuai dengan pengaturan content yang sudah kamu definisikan.

Verifikasi Hasil Build

Setelah build selesai, kamu bisa mengecek ukuran file CSS di folder output (dist/ atau public/css/).
Gunakan juga alat seperti Chrome DevTools atau Lighthouse untuk mengukur peningkatan performa.

Kamu akan melihat skor “Performance” meningkat karena waktu load CSS jauh lebih cepat, terutama di koneksi internet lambat atau perangkat mobile.

Manfaat Langsung dari Optimasi Tailwind

Mengoptimasi ukuran file CSS Tailwind dengan purge dan build production memberikan banyak keuntungan, di antaranya:

Waktu load lebih cepat – CSS yang lebih kecil mempercepat rendering halaman.
Responsif di semua perangkat – Browser mobile tidak terbebani file besar.
Hemat bandwidth hosting – File kecil berarti transfer data lebih sedikit.
Lebih profesional – Kode produksi bersih dan efisien.

Dengan kata lain, optimasi ini bukan hanya soal teknis, tapi juga meningkatkan pengalaman pengguna (UX) secara nyata.

Kesimpulan

Proses optimasi ukuran file CSS Tailwind dengan Purge & Build Production adalah langkah wajib sebelum situs diluncurkan.
Dengan konfigurasi sederhana di tailwind.config.js, kamu bisa memangkas ukuran CSS hingga puluhan kali lebih kecil.

Langkah-langkah utamanya meliputi:

Menentukan file content yang digunakan Tailwind.
Menjalankan perintah build production (npx tailwindcss --minify).
Menggunakan safelist untuk mencegah kelas penting terhapus.

Dengan memahami konsep ini, kamu bisa memastikan website tampil cepat, ringan, dan tetap keren tanpa kehilangan fleksibilitas desain Tailwind.