Tailwind v4 Dikompilasi Saat Build — Class Baru Saya (pl-16, h-7) Tidak Berefek di Production

Saya menambahkan timeline baru di halaman About sebuah tema yang saya kerjakan, deploy, lalu buka halaman live-nya. Hasilnya berantakan: titik-titik timeline menumpuk di atas label tahun, dan garis vertikal yang seharusnya menghubungkan mereka hilang sama sekali. Padahal di lokal semuanya tampak benar.

Kode-nya lolos php -l. Lolos code review — nama class-nya "kelihatan benar". Tapi di production, class-class ini tidak melakukan apa-apa:

<div class="relative pl-16">
    <span class="absolute left-[20px] w-[2px] h-full bg-neutral-300"></span>
    <span class="absolute left-[14px] h-7 w-7 rounded-full bg-black"></span>
    <span class="text-sm text-neutral-500">2024</span>
</div>

pl-16, left-[20px], w-[2px], h-7 — semua valid Tailwind. Jadi kenapa tidak berefek?

Akar masalahnya: Tailwind dikompilasi saat build, bukan di browser

Inilah yang saya lewatkan. Tema ini mem-bundle sebuah file tailwind-compiled.css yang sudah jadi. Tailwind tidak dihitung di browser — tidak ada CDN JIT, tidak ada runtime scanner. File CSS itu adalah snapshot statis dari setiap utility class yang ada saat terakhir kali seseorang menjalankan compiler.

Konsekuensinya tegas: class apa pun yang belum ada di dalam tailwind-compiled.css itu tidak melakukan apa-apa. Browser melihat class="pl-16", mencari .pl-16 di stylesheet, tidak menemukannya, dan diam saja. Tidak ada error, tidak ada warning — class-nya cuma tidak berefek.

Karena itulah titik-titik menumpuk (tanpa pl-16 tidak ada padding kiri untuk menggeser konten) dan garis vertikal hilang (w-[2px] dan left-[20px] tidak pernah dikompilasi, jadi span-nya tidak punya lebar dan tidak terlihat).

Di deploy yang sama ada bug turunan yang sempat membingungkan. Saya menambahkan logo di footer dengan class h-7 baru:

<img src="/logo.svg" class="h-7" alt="Logo">

Yang seharusnya 28px (h-7) malah meledak jadi selebar penuh container — sekitar 1200px. Penyebabnya kombinasi dua hal:

h-7 tidak ada di file terkompilasi, jadi tinggi yang saya minta diabaikan.
Preflight Tailwind (yang memang ada di file terkompilasi) menetapkan img { max-width: 100%; height: auto; }. Aturan reset itu menimpa atribut HTML width/height pada gambar, jadi gambar memuai mengikuti container-nya.

Jadi gambar kehilangan tinggi yang saya minta tapi tetap kena reset yang mengembangkannya. Kombinasi terburuk.

Perbaikannya: recompile sebelum deploy, lalu verifikasi

Solusi sebenarnya adalah memperlakukan recompile sebagai langkah build wajib, bukan opsional:

npx @tailwindcss/cli -i assets/css/input.css -o assets/css/tailwind-compiled.css

Lalu buktikan class baru sungguh masuk ke output sebelum upload:

grep -n "pl-16" assets/css/tailwind-compiled.css
grep -n "h-7" assets/css/tailwind-compiled.css

Kalau grep tidak menemukan apa-apa, class itu belum ada — dan deploy akan rusak persis seperti sebelumnya. Terakhir, pastikan tailwind-compiled.css masuk dalam daftar file yang di-upload. Lebih dari sekali saya recompile dengan benar lalu lupa meng-upload file CSS-nya, sehingga server tetap menyajikan versi lama.

Untuk gambar one-off seperti logo footer, ada jalan pintas yang melewati ketergantungan kompilasi sepenuhnya — inline style:

<img src="/logo.svg"
     style="height:32px;width:auto;display:block"
     alt="Logo">

Inline style punya specificity lebih tinggi dari preflight dan tidak bergantung sama sekali pada utility class apa pun yang sudah dikompilasi. Untuk satu-dua elemen kritis, ini lebih tahan banting daripada berharap class yang tepat ikut ter-compile.

Checklist untuk "class Tailwind saya tidak jalan di production"

Cek apakah tema memakai stylesheet Tailwind yang sudah dikompilasi. Kalau ada tailwind-compiled.css (atau sejenisnya) yang di-bundle, Tailwind tidak dihitung di browser.
grep class yang hilang di file terkompilasi. Tidak ketemu = bug-nya.
Recompile: npx @tailwindcss/cli -i input.css -o tailwind-compiled.css.
grep lagi untuk konfirmasi class-nya sekarang ada.
Masukkan file CSS terkompilasi ke daftar upload — recompile saja tidak cukup kalau filenya tidak ikut ter-deploy.
Untuk gambar, waspadai preflight. img { max-width:100%; height:auto } bisa menimpa atribut Anda; pakai inline style untuk yang kritis.

Pelajaran

Dengan stylesheet Tailwind yang sudah dikompilasi, sebuah class baru hanya ada kalau Anda merecompile. "Class-nya sudah ada di JSX/PHP" bukan jaminan apa-apa — browser tidak pernah melihat JSX/PHP Anda, hanya melihat file CSS statis itu. php -l hijau dan code review lolos tidak akan menangkap ini, karena bug-nya bukan di kode sumber — melainkan di langkah build yang terlewat. Jadikan recompile-lalu-grep sebagai bagian dari deploy, bukan sesuatu yang Anda ingat belakangan.