Seni Interaksi: Mendandani Form & Input
Bidang Isian (<input>) secara
bawaan terlihat sangat usang di semua peramban (Chrome/Safari/Firefox). Meriasnya dengan CSS tradisional
adalah mimpi buruk berkat outline biru jahat dan tombol radio yang kaku.
Di Tailwind, merombak tata rias formulir bisa dilakukan lewat Utilitas State (focus, invalid,
peer) atau menggunakan senjata rahasia: Plugin Resmi Forms.
💍 1. Menghilangkan Outline & Membuat Cincin Fokus (Focus Ring)
Langkah pertama memperbaiki input adalah membuang garis biru tebal bawaan menggunakan focus:outline-none. Sehagai
gantinya, kita buat cincin estetik semi transparan dengan grup focus:ring-*.
Outline biru kasar tidak selaras tema.
focus:border-indigo-500
focus:ring-4 focus:ring-indigo-500/20
// Angka 20 adalah opacity 20%
🛑 2. State Validasi: Error & Terkunci (Invalid / Disabled)
Tailwind bisa "membaca" status keabsahan form dari atribut HTML (seperti required, type="email", atau disabled). Cukup bubuhkan varian
invalid: atau disabled:!
invalid: Ujian Format Email
⚠️ Alamat email tidak berformat benar.
<input type="email" class="invalid:border-red-500 invalid:text-red-900 ...">
disabled: Elemen Terkunci
🎯 3. Sulap focus-within
Masalah klasik: Mengubah warna Latar Ikon di sebelah kiri input HANYA WAKTU sang input
diklik!
Solusi magis: Bungkus bungkus ikon dan input ke dalam blok <div> dengan class
focus-within:.
Klik kotaknya, lihat bagaimana Ikon Kunci berubah hijau bercahaya!
<div class="flex focus-within:ring-emerald-500">
<svg class="focus-within:text-emerald-400">
<input class="outline-none" />
</div>
🔌 4. Rahasia Industri: Plugin @tailwindcss/forms
Jika ada 100 <input> di web kamu, tentu menjengkelkan harus menempel class focus:ring-2 focus:ring-blue-500 border border-gray-300 rounded
100 kali. Tim Tailwind merilis plugin resmi @tailwindcss/forms untuk mereset semua form
menjadi wujud elegan secara default!
npm install -D @tailwindcss/forms
Fitur magis plugin forms setelah dipasang di
tailwind.config.js:
- Tombol Checkbox & Radio Ajaib: Tiba-tiba, kotak centang biru
kuno berubah menjadi abu-abu netral tipis yang sangat mudah di-styling dengan mengutus class
text-emerald-500. - Reset Skala Penuh: Box `select` (Dropdown) tiba-tiba punya panah chevron cantik (V) bawaan di kanannya tanpa gambar eksternal.
- Meniadakan Outline: Bebas selamanya mengetik `outline-none`! Input otomatis punya border abu-abu bersih dan *Focus Ring* biru khas Tailwind secara bawaan global.
💡 Bila ingin memakai UI Library lain: Jika kamu kelak memakai Shadcn UI atau framework UI lainnya seperti Headless UI, plugin Forms ini sebaiknya di-uninstall, karena Shadcn memiliki komponen form yang jauh lebih canggih!