فضابندی

4px  → space-1
8px  → space-2
12px → space-3
16px → space-4
24px → space-6
32px → space-8
40px → space-10
48px → space-12
64px → space-16

// padding کوچک — برای badge، tag
<span className="px-2 py-1">...</span>

// padding متوسط — برای button، input
<button className="px-4 py-2">...</button>

// padding بزرگ — برای card، section
<div className="p-6">...</div>

// padding خیلی بزرگ — برای page container
<main className="p-8 md:p-12">...</main>

// gap کوچک — بین badge ها و chip ها
<div className="flex gap-2">...</div>

// gap متوسط — بین button ها
<div className="flex gap-3">...</div>

// gap استاندارد — بین form field ها
<div className="flex flex-col gap-4">...</div>

// gap بزرگ — بین section ها
<div className="flex flex-col gap-8">...</div>

// فضابندی جهت‌دار — RTL-safe
<div className="ps-4 pe-6">     {/* padding-inline-start / end */}
<div className="ms-2 me-4">     {/* margin-inline-start / end */}
<div className="border-s-2">    {/* border-inline-start */}

// نه این
<div className="pl-4 pr-6">    {/* physical — در RTL برعکس می‌شود */}

<div className="flex flex-col gap-6 p-6">
  {/* Header */}
  <header className="flex items-center justify-between">
    <h1 className="text-foreground text-2xl font-bold">داشبورد</h1>
    <Button>اقدام</Button>
  </header>

  {/* Metrics Row */}
  <div className="grid grid-cols-4 gap-4">
    <MetricCard />
    <MetricCard />
    <MetricCard />
    <MetricCard />
  </div>

  {/* Main Content */}
  <div className="grid grid-cols-3 gap-6">
    <div className="col-span-2">
      <Card className="p-6">محتوا</Card>
    </div>
    <div>
      <Card className="p-4">جانبی</Card>
    </div>
  </div>
</div>

// line-height مناسب برای فارسی
<p className="leading-relaxed">متن با فاصله خط مناسب</p>

// فاصله بین پاراگراف‌ها
<div className="space-y-4">
  <p>پاراگراف اول</p>
  <p>پاراگراف دوم</p>
</div>

// heading با فاصله مناسب از محتوا
<div>
  <h2 className="text-xl font-semibold mb-3">عنوان</h2>
  <p className="text-light">محتوا</p>
</div>