1. Typography (Font)
Ukuran Font (font-size)
text-xs0.75rem (12px)
text-sm0.875rem (14px)
text-base1rem (16px)
text-lg1.125rem (18px)
text-xl1.25rem (20px)
text-2xl1.5rem (24px)
text-3xl1.875rem (30px)
text-4xl2.25rem (36px)
text-5xl3rem (48px)
text-6xl3.75rem (60px)
text-7xl4.5rem (72px)
text-8xl6rem (96px)
text-9xl8rem (128px)
Ketebalan Font (font-weight)
font-thin100
font-extralight200
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-black900
Sifat & Format Teks
italic / not-italicCetak miring / normal
uppercase / lowercase / capitalizeKapitalisasi teks
text-left / text-center / text-right / text-justifyPenataan teks
underline / line-through / no-underlineGaris bawah / coret / tanpa garis
tracking-tight ... tracking-wideJarak antar huruf (letter-spacing)
leading-none ... leading-looseJarak antar baris (line-height)
truncate / break-wordsPemotongan teks panjang
2. Spacing (Margin & Padding)
Skala Nilai Standar:
0 = 0px | 0.5 = 2px | 1 = 4px | 2 = 8px | 3 = 12px | 4 = 16px | 6 = 24px | 8 = 32px | 10 = 40px | 12 = 48px | 16 = 64px | px = 1px
(Gunakan kurung siku untuk nilai kustom, contoh: m-[15px] atau p-[3rem])
Margin (m)
m-{size}Margin seluruh sisi
mx-{size}Margin kiri & kanan (m-left + m-right)
my-{size}Margin atas & bawah (m-top + m-bottom)
mt-{size}Margin atas (margin-top)
mr-{size}Margin kanan (margin-right)
mb-{size}Margin bawah (margin-bottom)
ml-{size}Margin kiri (margin-left)
mx-autoMargin otomatis kiri-kanan (ketengah)
-m-{size} / -mt-{size}Margin negatif (contoh: -mt-4)
Padding (p)
p-{size}Padding seluruh sisi
px-{size}Padding kiri & kanan (p-left + p-right)
py-{size}Padding atas & bawah (p-top + p-bottom)
pt-{size}Padding atas (padding-top)
pr-{size}Padding kanan (padding-right)
pb-{size}Padding bawah (padding-bottom)
pl-{size}Padding kiri (padding-left)
3. Utilitas Lain yang Umum Digunakan
Flexbox & Grid (Tata Letak)
flex / inline-flex / grid / hidden / blockDisplay properties
flex-row / flex-colArah flexbox
items-center / items-start / items-endSumbu silang flex (align-items)
justify-center / justify-between / justify-aroundSumbu utama flex (justify-content)
gap-{size}Jarak antar elemen flex/grid (gap-4)
grid-cols-1 s.d. grid-cols-12Jumlah kolom grid (grid-cols-3)
Warna Teks & Latar Belakang (Colors)
text-{color}-{weight}Warna teks (text-red-500, text-white)
bg-{color}-{weight}Warna latar belakang (bg-blue-600)
bg-transparentLatar belakang transparan
Ukuran Elemen (Sizing)
w-full / w-screen / w-auto / w-1/2Lebar elemen (width)
h-full / h-screen / h-autoTinggi elemen (height)
max-w-sm ... max-w-7xlBatas lebar maksimum
Batas & Sudut (Borders & Radius)
border / border-2 / border-4Ketebalan garis tepi
border-{color}-{weight}Warna garis tepi (border-gray-300)
rounded-none ... rounded-fullLengkungan sudut (border-radius)
Bayangan & Efek (Shadow & States)
shadow-sm ... shadow-xlEfek bayangan
hover:{class}Efek kursor diarahkan (hover:bg-blue-700)
focus:{class}Efek saat aktif/difokuskan (focus:ring-2)
transition-all / duration-300 / ease-in-outAnimasi transisi halus