Cara Kerja Mesin JIT

Mesin Just-In-Time (JIT) milik Tailwind, yang diperkenalkan pada Tailwind v2.1 dan dijadikan bawaan pada v3, mengubah secara mendasar cara Tailwind menghasilkan CSS. Alih-alih membuat sebelumnya setiap kemungkinan kombinasi kelas utilitas saat build (yang menghasilkan CSS berukuran megabita), JIT memindai berkas proyek Anda dan hanya menghasilkan kelas yang benar-benar digunakan.

Hasilnya adalah berkas CSS yang biasanya hanya berukuran beberapa kilobita saat pengembangan dan bahkan lebih kecil saat produksi, tanpa kode yang terbuang.

Sebelum JIT, Tailwind menggunakan tahap pembersihan di akhir build: semua CSS yang mungkin (~10MB) dibuat, lalu setiap kelas yang tidak ditemukan dalam templat dihapus. Proses ini lambat, memerlukan konfigurasi pembersihan yang cermat, dan gagal saat nama kelas dibuat secara dinamis.

JIT membalik proses ini: berkas dipindai terlebih dahulu dan CSS hanya dibuat untuk kelas yang ditemukan. Hasilnya langsung berukuran kecil di setiap lingkungan — pengembangan, staging, dan produksi — serta build berlangsung jauh lebih cepat.

JIT membaca larik content di tailwind.config.js untuk mengetahui berkas mana yang harus dipindai. JIT menggunakan pemindaian cepat berbasis regex (bukan pengurai HTML/JS lengkap) untuk menemukan string yang menyerupai kelas. Setiap string yang cocok dengan pola kelas Tailwind yang dikenal akan dibuatkan CSS-nya.

Inilah alasan konfigurasi larik content dengan benar sangat penting — jika JIT tidak dapat menemukan suatu berkas, kelas yang digunakan di dalamnya tidak akan dibuat.

Saat JIT mendeteksi kelas dalam markup, JIT segera membuat aturan CSS yang tepat untuknya. Jika Anda menggunakan bg-blue-500, hanya satu aturan warna tersebut yang dibuat — bukan seluruh skala warna biru. Jika kemudian Anda menambahkan bg-blue-700, JIT akan membuat aturan baru itu pada build ulang berikutnya.

Dalam pengembangan, proses ini berlangsung dalam hitungan milidetik berkat pemantau berkas. Pendekatan JIT berarti Anda mendapatkan CSS tanpa beban berlebih — setiap byte dalam stylesheet Anda benar-benar digunakan.

JIT mengaktifkan sintaks nilai sewenang-wenang — kemampuan menggunakan nilai CSS apa pun secara langsung dalam nama kelas dengan notasi tanda kurung siku. Sebelum JIT, nilai sewenang-wenang tidak mungkin digunakan tanpa konfigurasi khusus. JIT membuat aturan sesuai permintaan saat mendeteksi sintaks tanda kurung siku.

Contohnya, w-[347px], text-[#1a2b3c], atau top-[calc(100vh-64px)] dapat langsung digunakan. JIT mendeteksi tanda kurung siku, mengurai nilainya, dan membuat CSS yang benar-benar diperlukan.

Keterbatasan penting dari pendekatan JIT berbasis pemindaian adalah JIT tidak dapat mendeteksi nama kelas yang dibuat secara dinamis. Jika Anda membuat nama kelas melalui penggabungan string dalam JavaScript, JIT tidak akan melihat hasilnya saat pemindaian.

Solusinya adalah menghindari pembuatan kelas secara parsial. Selalu gunakan string kelas lengkap, atau gunakan daftar aman dalam konfigurasi untuk kelas yang ditentukan secara dinamis.

Menjalankan npx tailwindcss -i input.css -o output.css --watch memulai JIT dalam mode pemantauan. JIT memantau semua berkas yang cocok dengan pola glob content dan membangun ulang berkas CSS dalam hitungan milidetik setiap kali suatu berkas berubah.

Dalam proyek Vite atau Next.js, JIT Tailwind terintegrasi dengan alur pipeline HMR (Hot Module Replacement) milik alat build, sehingga pembaruan CSS langsung muncul di peramban tanpa memuat ulang seluruh halaman.

Sebelum JIT, Anda harus mengaktifkan varian secara eksplisit dalam berkas konfigurasi (seperti hover, focus, dark) untuk setiap kelompok utilitas. Mengaktifkan setiap varian untuk setiap utilitas akan membuat berkas CSS yang sangat besar sebelumnya.

JIT menyelesaikan masalah ini sepenuhnya — setiap varian berfungsi pada setiap utilitas tanpa konfigurasi. hover:bg-blue-500, dark:text-white, lg:hover:bg-blue-700 — semuanya dibuat sesuai permintaan tanpa konfigurasi apa pun.

Array content menggunakan pola glob untuk menentukan file mana yang harus dipindai oleh JIT. Glob seperti './src/**/*.{html,js}' cocok dengan semua file HTML dan JS di mana pun dalam hierarki direktori src.

Kesalahan yang umum terjadi antara lain melupakan ekstensi file, menggunakan jalur dasar yang salah, atau tidak menyertakan paket node_modules yang berisi kelas Tailwind, seperti pustaka komponen UI. Anda juga dapat meneruskan array string, bukan glob, untuk file tertentu.

JIT menghasilkan kumpulan CSS yang sama dalam lingkungan pengembangan maupun produksi — hanya kelas yang ditemukan dalam file konten Anda. Perbedaannya dalam produksi adalah Tailwind juga menerapkan minifikasi melalui peminimal CSS dalam alat build Anda, dan mungkin autoprefixer PostCSS untuk mendukung peramban lama.

Tidak ada langkah purge terpisah dalam Tailwind v3. Menetapkan NODE_ENV=production dalam perintah build Anda mengaktifkan minifikasi, tetapi tidak mengubah kelas yang dihasilkan — kelas tersebut sudah minimal dalam pengembangan berkat JIT.

JIT mematuhi urutan layer CSS Tailwind: gaya dasar berada di urutan pertama, kemudian gaya komponen, lalu gaya utilitas. Urutan ini penting karena utilitas secara konvensi memiliki spesifisitas tertinggi — utilitas harus selalu menang saat bertentangan dengan gaya komponen.

CSS khusus yang ditulis dengan @layer utilities juga dihasilkan oleh JIT bersama utilitas bawaan. CSS khusus yang ditulis di luar @layer mana pun berada di antara base dan komponen dalam hal spesifisitas, yang dapat menyebabkan perilaku penimpaan yang tidak terduga.

Dalam pelajaran ini Anda telah mempelajari bahwa JIT memindai file konten Anda sebagai teks untuk menemukan string kelas dan hanya menghasilkan CSS untuk kelas tersebut, sehingga menghapus gaya yang tidak digunakan sejak awal; nilai arbitrer seperti w-[347px] diaktifkan oleh pembuatan sesuai permintaan JIT; dan pembuatan kelas secara dinamis mengganggu deteksi JIT karena JIT tidak dapat menjalankan JavaScript — selalu gunakan string kelas lengkap dalam objek daftar aman. Selanjutnya, kita akan mempelajari pencantuman kelas dinamis dalam daftar aman.