Spacing System: Bí Mật Của UI Chuyên Nghiệp
Điều khác biệt lớn nhất giữa UI amateur và professional là spacing. Consistent spacing tạo ra cảm giác "đắt tiền" cho design.
Tailwind Spacing Scale
Prompt Chuẩn:
Sử dụng Tailwind spacing scale nhất quán:
Micro spacing (text elements):
- gap-1 (4px): giữa icon và text
- gap-2 (8px): giữa related items
Small spacing (components):
- gap-4 (16px): giữa form fields
- gap-6 (24px): giữa card sections
Medium spacing (sections):
- gap-8 (32px): giữa content blocks
- gap-12 (48px): giữa major sections
Large spacing (pages):
- gap-16 (64px): section padding
- gap-20 (80px): hero spacing
8-Point Grid System
Prompt Template:
Mọi spacing và sizing phải divisible by 8:
- Padding: p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px)
- Margin: m-4, m-8, m-12, m-16
- Border-radius: rounded-lg (8px), rounded-xl (12px)
- Icon sizes: 16px, 24px, 32px
Không dùng arbitrary values như p-[13px].
Layout Patterns
Container Widths:
Container setup:
- max-w-7xl: Full-width content (1280px)
- max-w-5xl: Reading content (1024px)
- max-w-3xl: Forms, modals (768px)
- max-w-lg: Narrow forms (512px)
Centered: mx-auto
Padding sides: px-4 sm:px-6 lg:px-8
Card Layout:
Standard card:
- Padding: p-6
- Border: border border-slate-200
- Background: bg-white
- Radius: rounded-xl
- Shadow: shadow-sm (hover: shadow-md)
Stack multiple cards: space-y-4
Grid cards: grid gap-6 md:grid-cols-2 lg:grid-cols-3
Vertical Rhythm
Prompt Cho Consistent Rhythm:
Thiết lập vertical rhythm:
Within components:
- Related items: space-y-2
- Distinct items: space-y-4
Between components:
- Same section: space-y-6
- Different sections: space-y-12
Page sections:
- py-16 sm:py-20 lg:py-24
Visual Examples
Form Layout:
Form field structure:
- Label: text-sm font-medium mb-2
- Input: h-10 px-3 (consistent height)
- Helper text: text-sm text-slate-500 mt-1
- Error: text-sm text-red-600 mt-1
- Field spacing: space-y-6
Pro Tips Cho Review
| Check | Good | Bad |
|---|---|---|
| Card padding | p-6 consistent | p-4 some, p-8 others |
| Section gap | py-16 throughout | py-8 here, py-24 there |
| Grid gaps | gap-6 all grids | gap-4, gap-8, gap-10 mixed |
💡 Golden Rule: Khi nghi ngờ, add more whitespace. Rarely thấy design failed vì quá nhiều spacing.