تابز مدیا | آموزش قدم به قدم برنامه نویسی

Customizing Spacing

Spacing همون فاصله‌هاست که برای margin, padding, width, height, gap و … استفاده میشه.
Tailwind به صورت پیش‌فرض یه مقیاس spacing داره مثل:


0, 0.5, 1, 1.5, 2, 2.5, 3, … , 64, 72, 80, 96

📌 مثال:


<div class="p-4 m-8">Box با فاصله</div>


module.exports = {
  theme: {
    extend: {
      spacing: {
        72: "18rem",
        84: "21rem",
        96: "24rem",
      },
    },
  },
}

📌 استفاده:


<div class="mt-72">Margin بالا 18rem</div>
<div class="p-96">Padding سفارشی 24rem</div>


module.exports = {
  theme: {
    extend: {
      spacing: {
        "header": "4.5rem",
        "footer": "8rem",
      },
    },
  },
}

📌 استفاده:


<header class="h-header bg-blue-500">هدر</header>
<footer class="h-footer bg-gray-800">فوتر</footer>

اگه نخوای مقادیر پیش‌فرض باشن:


module.exports = {
  theme: {
    spacing: {
      sm: "8px",
      md: "16px",
      lg: "32px",
    },
  },
}

📌 استفاده:


<div class="p-md">Padding 16px</div>

Spacing سفارشی توی gap و grid هم کار می‌کنه:


<div class="grid grid-cols-2 gap-84">
  <div class="bg-red-500">1</div>
  <div class="bg-blue-500">2</div>
</div>