← CSS53 / 62

Flexbox versi Tailwind

Semua konsep Flexbox yang kamu pelajari berlaku sama, hanya namanya berubah: flex = display: flex, justify-between = justify-content: space-between, items-center = align-items: center, gap-4 = gap: 1rem. Inilah keuntungan belajar CSS murni lebih dulu — Tailwind jadi sekadar kosakata baru. Karena penamaannya mengikuti CSS aslinya, kamu bisa membaca kelas Tailwind milik orang lain tanpa membuka dokumentasi begitu CSS murninya sudah kamu kuasai.

👀 Contoh dulu

<!-- CSS: display:flex; align-items:center; gap:8px -->
<div class="flex items-center gap-2">
  <img class="w-8 h-8 rounded-full" src="a.jpg" alt="">
  <span>Nama Pengguna</span>
</div>

Hasilnya: Foto profil bulat dan nama berjejer rapi, sejajar secara vertikal di tengah.

💡 Terjemahan langsung: flex→display:flex, items-center→align-items:center, gap-2→gap:8px.

📝 Sekarang giliranmu

Buat navbar: tambahkan flex, justify-between, items-center, dan p-4 pada elemen <nav>.

Preview

← Sebelumnya Berikutnya →