راهنمای ساخت با دیگ

// نادرست
<p className="text-[13px] text-[#4c5c6b]">توضیح</p>
<div className="p-[20px] gap-[8px]">…</div>

// درست
<p className="text-description text-muted-foreground">توضیح</p>
<div className="p-card gap-stack">…</div>

<SidebarProvider>
  <AppSidebar />
  <SidebarInset>
    <header className="flex h-16 items-center border-b px-6">…</header>

    <main className="flex-1 overflow-y-auto px-gutter py-section">
      <div className="mx-auto flex max-w-page flex-col gap-section">

        {/* تیتر صفحه و کنش‌های سطح صفحه، هم‌ردیف */}
        <div className="flex flex-wrap items-center justify-between gap-inline-loose">
          <div className="flex flex-col gap-stack-tight">
            <h1 className="text-title font-semibold tracking-heading">عنوان</h1>
            <p className="text-description text-muted-foreground">زیرعنوان</p>
          </div>
          <Button>کنش اصلی</Button>
        </div>

        {/* محتوا */}
        <Card>…</Card>
      </div>
    </main>
  </SidebarInset>
</SidebarProvider>

import { toFaDigits, formatNumber, formatJalali } from "@/lib/persian"

<span className="tabular-nums">{formatNumber(2400000000)}</span>
<span className="tabular-nums">{formatJalali(date)}</span>

// هرجا عدد در ستون می‌نشیند، tabular-nums لازم است
// وگرنه عرض ارقام فرق می‌کند و ستون می‌لرزد

// نادرست
<div className="ml-4 text-left border-l">…</div>
<Sidebar side="left" />

// درست
<div className="ms-4 text-start border-s">…</div>
<Sidebar side="start" />   {/* در RTL خودش راست می‌شود */}