Kartu lengkap: menyusun semuanya
Sekarang gabungkan: layout, spacing, tipografi, dan state dalam satu komponen kartu yang realistis. Perhatikan bahwa kelas dibaca berkelompok — biasakan urutan yang konsisten (layout → spacing → warna → tipografi → state) agar mudah dibaca orang lain. Kalau satu elemen sudah memuat lebih dari sekitar lima belas kelas, itu tanda komponennya perlu dipecah — bukan tanda kamu butuh @apply.
👀 Contoh dulu
<!-- urutan kelas: layout → ukuran → spacing → warna → teks → state --> <div class="flex flex-col w-64 p-4 bg-gray-100 rounded-lg"> <h4 class="text-lg font-semibold mb-1">Judul</h4> <p class="text-sm text-gray-500">Keterangan singkat</p> </div>
Hasilnya: Kartu abu-abu berlebar 256px berisi judul tebal dan keterangan kecil berwarna lebih redup.
💡 Kelas bisa sangat banyak — urutan yang konsisten membuat orang lain (dan kamu nanti) mudah membacanya.
📝 Sekarang giliranmu
Buat kartu produk: pada div luar tambahkan max-w-sm, rounded-xl, shadow-lg, p-6, bg-white; pada judul <h3> tambahkan text-xl, font-bold, mb-2.