با شما در این روزهای سخت همراهیم (۴۰٪ تخفیف کمپین همدلی)
۰ ثانیه
۰ دقیقه
۰ ساعت
۰ امیر حق شناس
جلسه پنجم - سفارشی سازی هسته فریم ورک بخش سوم - spacing
جامعه Html & CSS ایجاد شده در ۱۸ بهمن ۱۴۰۴

📏 Spacing یعنی چی؟

✔️ فاصله‌ها در Tailwind شامل:
• margin
• padding
• gap
• space-*


🎯 Spacing پیش‌فرض Tailwind

✔️ به‌صورت عددی تعریف شده:
• 0 , 0.5 , 1 , 1.5 , 2 , 3 , 4 , 5 , 6 , 8 , 10 , 12 , 16 , 20 , 24 ...

📌 هر عدد = مضرب 0.25rem


⚙️ افزودن Spacing کاستوم

✔️ فقط داخل extend.spacing:

 

theme: {
  extend: {
    spacing: {
      '13': '3.25rem',
      '18': '4.5rem',
      'section': '6rem',
    }
  }
}

🧠 نحوه استفاده در کلاس‌ها

✔️ همه جا قابل استفاده است:

• p-section
• mt-section
• gap-section
• space-y-section

📌 بدون نوشتن CSS اضافی


✅ جمع‌بندی

• Spacing = فاصله‌های طراحی
• در padding, margin, gap, space-* استفاده می‌شود
• نام‌گذاری معنایی پروژه را تمیزتر می‌کند