Cara Berpikir Utility-First

Tailwind mengubah cara kita menulis gaya: kelas kecil yang digabung, bukan nama kelas panjang.

Bab ini membahas tiga hal: membandingkan CSS biasa dan utility, kapan perlu kelas sendiri, dan membaca kelas dengan cepat. Bacalah berurutan, karena bagian akhir memakai hasil dari bagian awal.

Gambaran

Sebelum menulis kode, pahami dulu masalah yang ingin diselesaikan. Pada topik Cara Berpikir Utility-First, kesalahan yang paling sering terjadi adalah langsung mencontoh potongan kode tanpa memahami kenapa kode itu ditulis begitu. Akibatnya, saat kebutuhan sedikit berbeda, kode tersebut sulit diubah.

Kita mulai dari membandingkan CSS biasa dan utility. Bagian ini menjadi dasar untuk dua bagian berikutnya.

Contoh

Berikut contoh yang akan kita kembangkan sepanjang bab:

<button class="inline-flex items-center gap-2 rounded-lg bg-slate-900 px-4 py-2
               text-sm font-semibold text-white hover:bg-slate-700
               focus-visible:outline-2 focus-visible:outline-offset-2">
  Simpan perubahan
</button>

Perhatikan bahwa setiap baris punya satu tugas. Pola ini memudahkan pengujian dan perubahan di kemudian hari.

Langkah

1. Mulai dari membandingkan CSS biasa dan utility, lalu pastikan hasilnya sesuai harapan.
2. Lanjutkan ke kapan perlu kelas sendiri. Di sinilah biasanya muncul pertanyaan, jadi bacalah pelan-pelan.
3. Terakhir, membaca kelas dengan cepat. Bandingkan hasilnya dengan contoh di atas.

Ringkasan

• membandingkan CSS biasa dan utility
• kapan perlu kelas sendiri
• membaca kelas dengan cepat

Di bab berikutnya kita memakai hasil bab ini sebagai dasar. Tandai bab ini selesai bila contoh di atas sudah berjalan di komputer Anda.