website blog nesianet menggunakan - apa itu pendekatan utility css seperti Tailwind?

10 April 2025

Pendekatan utility-first seperti yang digunakan di Tailwind CSS adalah gaya penulisan CSS yang mengandalkan class-class kecil (utility class) yang memiliki satu tanggung jawab/style spesifik, alih-alih bikin class besar-besar dengan banyak properti.

Apaitu tailwind, Tailwind CSS adalah framework CSS utility-first yang memungkinkan kamu membangun tampilan website dengan cepat dan efisien, langsung dari class di HTML tanpa perlu menulis banyak CSS sendiri.

jadi suatu website yang menggunakan framework css tampilannya akan identik dengna website lainyang menggunakan suatu framework yang sama, sama seperti fitur js, jika menggunakan framework yang sama, maka akan sama, tapi karena banyaknya customisasis dan kode yang disediakan jadi developerjustru bsa membuat banyak kombinasi desain yang uniktapi tetap mengikuti nama class di framework tsb.

Contoh:

Tailwind:

<style>

.a {,,,,}

.b {....}

.c {...}

</style>

penerapan di body

atau <div class="b c"> dst

Non Tailwind/tradisional:

<style>

.a,.b {,,,,,,}

dst

✅ Class yang dipakai (ditemukan di elemen HTML):

Class Deskripsi

body Gaya dasar untuk seluruh halaman.

a Gaya link.

h Ukuran judul (h1 di header).

jdl Judul postingan (h2 di daftar blog).

date Tanggal postingan.

flx Flexbox wrapper di list postingan.

alg Digunakan untuk align-items: center di Flexbox.

spc Margin & padding spasi (banyak digunakan).

separator Digunakan untuk penataan tengah/garis pemisah.

bg Background biru (juga tombol navigasi).

ptih Warna teks putih (link navbar dan tombol).

pth Background putih untuk kontainer.

pst Pembungkus isi konten/tulisan blog.

← Lebih Baru Lainnya →

website blog nesianet menggunakan - apa itu pendekatan utility css seperti Tailwind? - NesiaNet