Bingkai Editorial Mobile-First & Tailwind v4

Masalahnya dulu

Lebih dari 95% penerima undangan digital membuka tautan langsung dari aplikasi pesan singkat di ponsel mereka. Namun jika seseorang membukanya di layar laptop yang lebar dan tata letaknya ikut melebar ke samping, posisi judul kaligrafi yang menumpuk di tepi foto (overlapping typography) serta garis-garis absolut akan berantakan.

Kanvas terpusat max-w-lg dan registrasi font di Tailwind v4

Untuk menjamin komposisi visual yang identik di semua perangkat, RootLayout membungkus seluruh aplikasi di dalam kontainer w-full max-w-lg mx-auto di tengah latar belakang gradasi lembut (bg-linear-to-br from-red-50 via-white to-red-50). Di sisi styling, proyek ini sudah mengadopsi Tailwind CSS v4 dengan pendekatan konfigurasi langsung di dalam globals.css menggunakan direktif @theme untuk mendaftarkan font skrip lokal Moontime dan Caitlin berdampingan dengan Playfair Display serta palet merah marun (red-900 / red-950).

Mengunci kanvas pada lebar max-w-lg menjaga presisi tata letak editorial layaknya halaman majalah cetak, baik saat dibuka di genggaman ponsel maupun di monitor lebar.

Implementasi di ngodingan ini

Konfigurasi tema CSS-first Tailwind v4 beserta registrasi font lokal dan penyembunyian scrollbar di src/app/globals.css:

@import "tailwindcss";

@theme {
  --font-moontime: "Moontime", cursive;
  --font-caitlin: "Caitlin", cursive;
}

@layer utilities {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; -ms-overflow-style: none; }
}

@font-face {
  font-family: "Moontime";
  src: url("/fonts/moontime.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Jebakan dan detail yang harus dijaga

• Di Tailwind CSS v4, pendaftaran utilitas font kustom seperti font-moontime tidak lagi memakai tailwind.config.js, melainkan cukup mendeklarasikan variabel --font-moontime di dalam blok @theme pada file CSS utama.
• Mengunci variabel warna :root pada media query prefers-color-scheme: dark agar tetap #ffffff memastikan tema warna putih-marun undangan tidak berubah menjadi hitam secara tak sengaja di ponsel pengguna yang mengaktifkan Dark Mode sistem.
• Penggunaan overflow-x-hidden pada pembungkus halaman sangat penting karena judul kaligrafi berukuran besar (text-7xl) yang dimiringkan (-rotate-8) dan gambar yang bergeser dari luar layar (x: 220) dapat memicu munculnya gulir horizontal jika tidak dipotong.