← CSS51 / 62

Utility-first: dari CSS ke kelas

Tailwind menyediakan kelas kecil yang masing-masing mewakili satu deklarasi CSS. p-4 = padding: 1rem, bg-blue-500 = warna latar biru, text-white = teks putih. Kamu tidak menulis CSS lagi — kamu menyusun kelas di HTML. Karena kamu sudah paham CSS murni, ini murni soal penerjemahan.

👀 Contoh dulu

<!-- CSS biasa -->
<!-- .box { background: #ef4444; color: white; padding: 8px } -->

<!-- Tailwind: kelas yang setara -->
<div class="bg-red-500 text-white p-2">Kotak</div>

Hasilnya: Kotak merah dengan teks putih dan padding 8px — hasil identik dengan CSS di atasnya.

💡 Pola nama: bg- untuk background, text- untuk warna teks, p- untuk padding. Angka = intensitas/ukuran.

📝 Sekarang giliranmu

Pada <div>, tambahkan kelas Tailwind: bg-blue-500, text-white, dan p-4.

Preview

← Sebelumnya Berikutnya →