Ketika Pindah Root Layout Next.js, Tailwind Tiba-tiba Hilang

Sore itu saya lagi ngerjain refactor i18n di salah satu project Next.js App Router. Sesuai dokumentasi resmi, pola yang disarankan: mindahin root layout dari app/layout.tsx ke dalam app/[locale]/layout.tsx. Saya bikin file barunya dari nol, nyalin struktur HTML dasar, nyesuaiin logic routing biar nangkep parameter bahasa. Build lewat tanpa error, tanpa warning.

Tapi pas buka browser, tampilannya hancur. Semua elemen jadi HTML polos. Tailwind yang biasanya rapi, mendadak nggak ada. Halaman kelihatan kayak draft HTML dari tahun 90-an.

Refleksi pertama: nyalahin cache sama token

Refleksi pertama saya: pasti ada design token yang rusak atau cache build yang nyangkut. Saya clear cache, restart dev server, ngecek ulang config Tailwind berkali-kali. Tapi yang bikin bingung, bukan cuma komponen custom yang berantakan. Utility dasar kayak flex, grid, text-red-500 juga nggak ngaruh sama sekali.

Kalau cuma token yang error, utility bawaan harusnya tetap jalan. Ini tandanya masalahnya lebih fundamental. Saya bahkan sempat curiga ke versi Tailwind v4 yang baru saya pakai.

Akar masalah: satu baris import yang tertinggal

Empat menit kemudian, pas ngecek diff commit terakhir, ketahuan hal yang sepele: waktu bikin file layout baru ngikutin panduan i18n, satu baris dari layout lama nggak ikut pindah, import "../globals.css".

Cara kerja Tailwind v4 emang lewat satu pintu: baris @import "tailwindcss" di dalam file CSS global [6]. Kalau file itu nggak di-import di mana pun, Tailwind secara efektif nggak eksis di halaman. Build tetap hijau karena nggak ada syntax error; output CSS-nya cuma kosong.

Secara arsitektur langkah saya udah bener. Dokumentasi Next.js bilang root layout adalah tempat global CSS seharusnya di-import [4], dan panduan i18n secara eksplisit membolehkan root layout di-nest ke folder [lang] [5]. Masalahnya murni: saya ngetik ulang file itu dari awal dan kelewat satu import statement.

Yang bikin kasus begini nyebelin adalah sifat error-nya yang silent. Produksi CSS di Next.js ikut termuat dan tetap jalan walau JavaScript dimatikan [4]. Jadi ini bukan hydration glitch yang kadang muncul lalu bener sendiri. Halaman tetap interaktif, tombol bisa diklik. Cuma nggak ada styling yang nempel.

Menurut saya dokumentasi i18n-nya agak nyebelin di titik ini: mereka ngasih contoh struktur layout baru, tapi nggak selalu ngingetin buat mindahin import side-effect kayak CSS global. Kita fokus ke logic routing, lupa layout lama punya dependency tersembunyi.

Cara ngecek sebelum commit

Pelajaran mahal dari migrasi ini satu: cek import dulu sebelum commit. Tell-tale paling gampang adalah utility dasar yang sama sekali nggak bereaksi di browser.

grep -r "globals.css" app/

Kalau output-nya kosong atau nunjukin file yang salah, itu biang keroknya. Jangan langsung nyalahin config Tailwind, design token, atau reset node_modules sebelum ngecek satu baris import ini.

Sekarang setiap mau ngubah struktur folder App Router, saya selalu ngecek semua import side-effect yang nempel di file aslinya. Pindah file bukan cuma soal mindahin JSX, tapi juga mindahin baris import yang sering nggak keliatan. Satu baris kelewat bisa menghabiskan sejam buat debugging yang nggak ada hubungannya sama logic aplikasi. Sources: [4] https://nextjs.org/docs/app/building-your-application/styling/css [5] https://nextjs.org/docs/app/building-your-application/routing/internationalization [6] https://tailwindcss.com/docs/installation/using-postcss

[4] Next.js: CSS in App Router
[5] Next.js: Internationalization
[6] Tailwind: install with PostCSS