🔹 Theme توی Tailwind چیه؟

تمام طراحی پایه مثل رنگ‌ها، فونت‌ها، فاصله‌ها (spacing)، سایزها و … داخل بخش theme در فایل tailwind.config.js تعریف میشه.
با تغییر یا گسترش این قسمت، می‌تونی Tailwind رو دقیقا متناسب با پروژه‌ات شخصی‌سازی کنی.

🔹 ساختار پایه

module.exports = {
  theme: {
    extend: {},
  },
}

📌 توی extend می‌تونی مقادیر جدید اضافه کنی بدون اینکه مقادیر پیش‌فرض حذف بشن.

🔹 اضافه کردن رنگ‌های سفارشی

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1E88E5",
        accent: "#FF5722",
      },
    },
  },
}

📌 استفاده:

<div class="bg-brand text-white">Box</div>
<p class="text-accent">سلام دنیا!</p>

🔹 سفارشی کردن فاصله‌ها (Spacing)

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

📌 استفاده:

<div class="mt-72">Margin بالا با مقدار سفارشی</div>

🔹 تغییر فونت‌ها

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Vazirmatn", "Arial", "sans-serif"],
        custom: ["Shabnam", "sans-serif"],
      },
    },
  },
}

📌 استفاده:

<h1 class="font-custom text-2xl">عنوان با فونت سفارشی</h1>

🔹 Breakpoints سفارشی (Screens)

module.exports = {
  theme: {
    extend: {
      screens: {
        xs: "480px",
        "3xl": "1920px",
      },
    },
  },
}

📌 استفاده:

<div class="xs:bg-green-500 3xl:bg-blue-500">
  تغییر رنگ در سایزهای مختلف
</div>

🔹 جایگزینی کامل (نه extend)

اگه بخوای کل مقادیر پیش‌فرض رو حذف و از نو تعریف کنی:

module.exports = {
  theme: {
    colors: {
      primary: "#FF0000",
      secondary: "#00FF00",
    },
  },
}

📌 اینجا دیگه فقط همین رنگ‌ها وجود دارن و رنگ‌های پیش‌فرض حذف میشن.

🔹 نکته مهم

• از extend استفاده کن → مقادیر پیش‌فرض باقی می‌مونن.

• برای تغییر کلی → مقادیر رو مستقیم داخل theme تعریف کن.

• Theme قدرت اصلی Tailwind برای ساختن طراحی کاملا شخصی‌سازی‌شده است.