📌 این ویژگی مشخص می‌کنه که پس‌زمینه یک عنصر از کدام محدوده باکس شروع شود: content, padding یا border.
در Tailwind از کلاس‌های bg-origin-* استفاده می‌کنیم.

✅ کلاس‌ها

• bg-origin-border → پس‌زمینه از border box شروع می‌شود

• bg-origin-padding → پس‌زمینه از padding box شروع می‌شود

• bg-origin-content → پس‌زمینه از content box شروع می‌شود

✅ مثال

<div class="bg-gradient-to-r from-blue-500 to-green-500 bg-origin-border border-8 border-black p-4 mb-2">
  bg-origin-border
</div>

<div class="bg-gradient-to-r from-red-500 to-yellow-500 bg-origin-padding border-8 border-black p-4 mb-2">
  bg-origin-padding
</div>

<div class="bg-gradient-to-r from-purple-500 to-pink-500 bg-origin-content border-8 border-black p-4 mb-2">
  bg-origin-content
</div>

📌 نکات مهم

• این کلاس‌ها به کنترل دقیق محل شروع پس‌زمینه کمک می‌کنند.

• معمولاً همراه با padding و border استفاده می‌شوند تا اثر پس‌زمینه دقیق دیده شود.

• می‌توان با responsive ترکیب کرد:

  • sm:bg-origin-padding md:bg-origin-content