7 Tips Tailwind CSS untuk Desain yang Lebih Modern

1. Definisikan Token, Bukan Angka Ajaib

Jangan tulis p-[13px] di sepuluh tempat berbeda. Daftarkan spacing, radius, dan warna brand di tailwind.config.ts lalu pakai semantiknya (rounded-card, text-text-secondary). Konsistensi visual datang gratis.

2. Manfaatkan Variabel CSS untuk Dark Mode

Alih-alih menulis varian dark: di setiap elemen, petakan warna ke variabel CSS:

:root {
  --color-bg: 255 255 255;
  --color-card: 244 244 245;
}
.dark {
  --color-bg: 10 10 15;
  --color-card: 24 24 27;
}

Satu ganti tema, seluruh halaman ikut berubah tanpa logika JavaScript tambahan.

3. Animasi Mikro > Animasi Besar

Pengguna tidak butuh confetti terbang. Yang membuat UI terasa mahal justru transisi kecil:

<button class="transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg">
  Hover saya
</button>

Durasi Ideal

4. Kunci Lebar Konten dengan max-w-prose

Teks panjang yang membentang penuh melelahkan mata. Bungkus artikel dengan max-w-prose (atau max-w-[65ch]) supaya panjang baris ideal 50–75 karakter.

5. Gunakan space-y Alih-alih Margin Manual

Daripada memberi mb-4 pada tiap item lalu membersihkan elemen terakhir, cukup:

<ul class="space-y-3">
  <li>Item satu</li>
  <li>Item dua</li>
</ul>

Lebih bersih dan tidak meninggalkan margin yatim.

6. State Grup dengan group-hover

Ingin ikon bergeser saat kartu di-hover? Tidak perlu JS:

<a class="group">
  Baca artikel
  <span class="inline-block transition-transform group-hover:translate-x-1">→</span>
</a>

7. Ekstrak Komponen, Bukan @apply

Saat class mulai panjang, godaan besar untuk memasukkannya ke @apply. Padahal abstraksi yang benar adalah komponen Vue — class tetap hidup di markup sehingga mudah dibaca dan di-tweak per konteks.

Penutup

Modern bukan berarti penuh efek. Justru kombinasi token yang konsisten, whitespace yang lega, dan animasi mikro yang halus membuat desain terasa matang. Selamat mencoba!