Font Size

🔹 1. سایزهای پیش‌فرض

کلاسسایز متنتوضیح
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فوق غول‌آسا

🔸 مثال:

<p class="text-xs">متن خیلی کوچک (xs)</p>
<p class="text-base">متن نرمال (base)</p>
<p class="text-2xl">متن بزرگ‌تر (2xl)</p>
<p class="text-5xl">متن خیلی بزرگ (5xl)</p>

🔹 2. همراه با Line Height (leading)

می‌تونی سایز فونت رو با line-height ترکیب کنی:

<p class="text-xl leading-loose">این متن بزرگه و فاصله بین خطوط زیاد داره.</p>

🔹 3. سفارشی‌سازی در tailwind.config.js

اگه بخوای سایز جدید اضافه کنی:

extend: {
  fontSize: {
    tiny: "0.7rem",   // فونت کوچیک‌تر از xs
    huge: "5.5rem",   // فونت خیلی بزرگ‌تر
  }
}

استفاده:

<p class="text-tiny">متن خیلی ریز</p>
<p class="text-huge">متن خیلی بزرگ</p>

✅ خلاصه:

  • سایز پیش‌فرض از text-xs تا text-9xl

  • می‌تونی با leading فاصله خطوط رو تنظیم کنی

  • قابلیت تعریف سایز سفارشی در tailwind.config.js