Utility Classes

Utility Classes — Dasar Tailwind

Di Tailwind CSS, setiap kelas melakukan satu hal spesifik. Kita membangun UI dengan menggabungkan banyak kelas utility, bukan dengan menulis CSS kustom.

Kategori Utility Paling Sering Dipakai

Layout & Spacing

• flex, grid, block, inline-flex — display
• items-center, justify-between — flexbox alignment
• p-4, px-6, py-2 — padding (1 unit = 4px)
• m-4, mt-8, mb-2 — margin
• gap-4 — gap antar flex/grid items

Typography

• text-sm, text-lg, text-2xl — ukuran font
• font-medium, font-bold, font-extrabold — ketebalan
• text-gray-500, text-white — warna teks
• leading-relaxed, tracking-wide — line-height, letter-spacing

Background & Border

• bg-white, bg-violet-600, bg-gradient-to-r — background
• rounded, rounded-lg, rounded-full — border-radius
• border, border-gray-200 — border
• shadow-sm, shadow-md, shadow-xl — box shadow

Contoh Komponen Button

<button class="inline-flex items-center gap-2 px-5 py-2.5
               bg-violet-600 hover:bg-violet-700
               text-white text-sm font-semibold
               rounded-xl shadow-md transition-colors">
  <svg class="w-4 h-4" ...></svg>
  Simpan
</button>