tailwind

Kontrak warna mengunci dua nilai dalam satu hue: teks aksen di stop 800, fill CTA tetap 600. Ambang kontras WCAG yang menentukan, bukan selera.

TL;DR: Ganti accent text ke text-emerald-800 cuma lewat satu perintah sed, ternyata kena 409 kemunculan di 115 file. Satu hue butuh dua stop beda: teks wajib lolos 4,5 banding 1, fill button cukup 3 banding 1, jadi nggak bisa disatukan. Verifikasinya dua lapis, skrip kontras plus census CSS bundle, hasil akhirnya nilai hex lama nol.

Panah hover-only bikin baris kategori tak kelihatan bisa diklik di layar sentuh. Pelajaran affordance: aksi harus tampak saat diam.

TL;DR: Saya buka portal di ponsel dan berhasil masuk. Tapi di desktop, ada masalah dengan hover. Saya ganti dengan pil "Lihat" yang selalu tampak.

Iframe YouTube di hero 1440x420 memunculkan dua batang hitam tebal. Penyebabnya di sisi player; tiga solusinya: backdrop grid, cover-crop, dan atur rasio.

TL;DR: Hero slider di proyek Next.js tidak pas karena rasio video YouTube. Rasio 16:9 tidak bisa dilanggar, hanya bisa diisi atau dipotong. Solusi yang dipilih adalah memotong kelebihannya dengan overflow hidden.

Mengunci intent desain bukan dengan dokumentasi tebal, tapi dengan unit test yang memaksa class Tailwind tetap sesuai aturan token.

TL;DR: Abis restyle komponen, desainnya rapi bentar terus balik berantakan lagi gara-gara ketimpa kode dari branch lain. Bikin dokumen setebel apapun ternyata nggak ngaruh, akhirnya gue kunci pola class-nya pake unit test 129 baris yang ngecek string HTML. Jadi kalau ada yang nggak sengaja balikin style lama kayak bg-white atau rounded-xl, test-nya langsung meledak dan ketahuan di CI.

Tantangan teknis menempatkan badge ISO pada maskot: positioning, border-radius, dan animasi CSS yang tidak saling menimpa.

TL;DR: Nempel badge di maskot ternyata nggak semudah itu, butuh 12 commit gara-gara anchor absolute positioning-nya ngaco. Solusinya bungkus artwork pakai wrapper relative w-fit biar badge nggak ikut geser pas ukuran layar berubah. Badge juga sempat lonjong gara-gara rounded-full di kotak non-persegi, untung centering pakai translate Tailwind v4 aman dari keyframe animasi.

Pil background ternyata cuma tambal: brand mark butuh dua aset ketika situs punya dark mode plus toggle manual yang dipersist.

TL;DR: Wordmark putih buat dark mode ternyata aneh pas light mode, jadi slot brand butuh dua file gambar. Triknya dua Image Next.js di slot yang sama, satu dark:hidden, satu hidden dark:block, nol JavaScript. Hati-hati: dark variant Tailwind v4 defaultnya ngikutin OS, bukan toggle class, plus alt text dan dimensi jangan dilupain.

Refactor kaki halaman website korporat: kolom brand menempel ke dasar cuma pakai stretch plus mt-auto, tanpa JavaScript sama sekali.

TL;DR: Bikin kolom footer sejajar di dasar ternyata nggak butuh JavaScript, cukup align-items: stretch bawaan grid plus mt-auto. Lebar kolom bisa diatur pakai grid-cols-[1.4fr_1fr_1fr_1fr] biar blok brand lebih lega. Pelajarannya: cek dulu perilaku default sebelum nambah alat baru.

Revert font heading cuma satu baris karena semua heading membaca satu token. Eksperimen selera jadi murah.

TL;DR: Coba ganti font heading pakai Source Serif 4, kok 22 menit udah di-revert karena kelebayan bookish. Untung semua heading baca dari satu CSS variable, jadi undo-nya cuma satu baris, nggak perlu edit belasan file. Yang gagal dibuang, yang menang kayak nav Inter tetep kepake, eksperimen murah emang enak.

Border kartu lenyap di atas latar muted karena dua warna abu-abu kembar. Pelajaran soal token, kontras, dan asumsi latar.

TL;DR: Border kartunya nggak hilang, cuma warnanya kembaran sama latar muted jadi kayak ngumpet. Perbaikannya satu baris doang: ganti ke border-primary/15 plus bg-card/40, sekalian benerin kontras biar lolos WCAG. Pelajarannya, token warna itu asumsi, komponen multi-surface mending dites di semua surface dulu.