Letter Spacing

در Tailwind CSS برای Letter Spacing (فاصله‌ی بین حروف) کلاس‌های آماده‌ای وجود داره که دقیقا معادل مقادیر letter-spacing در CSS هستند. ✅

📌 کلاس‌های Letter Spacing در Tailwind

کلاسمقدار CSSتوضیح
tracking-tighterletter-spacing: -0.05em;خیلی فشرده
tracking-tightletter-spacing: -0.025em;کمی فشرده
tracking-normalletter-spacing: 0em;حالت پیش‌فرض
tracking-wideletter-spacing: 0.025em;کمی بازتر
tracking-widerletter-spacing: 0.05em;بازتر
tracking-widestletter-spacing: 0.1em;خیلی بازتر

📌 مثال

<div class="space-y-2"> <p class="tracking-tighter">Tailwind CSS - tighter</p> <p class="tracking-tight">Tailwind CSS - tight</p> <p class="tracking-normal">Tailwind CSS - normal</p> <p class="tracking-wide">Tailwind CSS - wide</p> <p class="tracking-wider">Tailwind CSS - wider</p> <p class="tracking-widest">Tailwind CSS - widest</p> </div>

🎯 نکته مهم

  • می‌تونی توی tailwind.config.js مقادیر جدید اضافه کنی:

module.exports = { theme: { extend: { letterSpacing: { extra: '0.2em', // سفارشی } } } }

و بعد اینطوری استفاده کنی:

<p class="tracking-extra">Custom Letter Spacing</p>