📌 این ویژگی مشخص می‌کنه که چطور رنگ‌های یک عنصر با رنگ پس‌زمینه یا عناصر زیرین ترکیب شوند.
در Tailwind از کلاس‌های mix-blend-{mode} استفاده می‌کنیم.

✅ کلاس‌ها

• mix-blend-normal → ترکیب عادی (default)

• mix-blend-multiply → رنگ‌ها ضرب می‌شوند (تیره‌تر می‌شود)

• mix-blend-screen → رنگ‌ها روشن‌تر می‌شوند

• mix-blend-overlay → ترکیبی از multiply و screen

• mix-blend-darken → تیره‌تر شدن رنگ

• mix-blend-lighten → روشن‌تر شدن رنگ

• mix-blend-color-dodge → افزایش روشنایی رنگ‌ها

• mix-blend-color-burn → افزایش تیرگی رنگ‌ها

• mix-blend-hard-light → روشنایی و تیرگی ترکیبی

• mix-blend-soft-light → روشنایی و تیرگی ملایم

• mix-blend-difference → تفاوت رنگ‌ها

• mix-blend-exclusion → حذف رنگ‌ها

• mix-blend-hue → حفظ Hue رنگ

• mix-blend-saturation → حفظ Saturation رنگ

• mix-blend-color → حفظ Hue و Saturation

• mix-blend-luminosity → حفظ Brightness

✅ مثال

<div class="relative w-32 h-32 bg-red-500 mb-2">
  <div class="absolute top-0 left-0 w-32 h-32 bg-blue-500 mix-blend-multiply">
    multiply
  </div>
</div>

<div class="relative w-32 h-32 bg-green-500 mb-2">
  <div class="absolute top-0 left-0 w-32 h-32 bg-yellow-500 mix-blend-screen">
    screen
  </div>
</div>

<div class="relative w-32 h-32 bg-purple-500 mb-2">
  <div class="absolute top-0 left-0 w-32 h-32 bg-pink-500 mix-blend-overlay">
    overlay
  </div>
</div>

📌 نکات مهم

• Mix Blend Mode روی عناصر positioned بهتر عمل می‌کند تا ترکیب با عناصر زیرین مشخص شود.

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

  • hover:mix-blend-multiply → هنگام هاور حالت multiply فعال شود