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

✅ کلاس‌ها

• bg-clip-border → پس‌زمینه فقط در حاشیه (border box) ظاهر می‌شود

• bg-clip-padding → پس‌زمینه فقط در padding box ظاهر می‌شود

• bg-clip-content → پس‌زمینه فقط در content box ظاهر می‌شود

• bg-clip-text → پس‌زمینه فقط روی متن اعمال می‌شود (برای افکت gradient روی متن)

✅ مثال

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

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

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

<h1 class="text-5xl font-bold bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent mb-2">
  bg-clip-text
</h1>

📌 نکات مهم

• bg-clip-text معمولاً با text-transparent ترکیب می‌شود تا gradient روی متن دیده شود.

• برای کنترل کامل ظاهر پس‌زمینه در عناصر با padding و border بسیار کاربرد دارد.

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

  • sm:bg-clip-content md:bg-clip-text