📌 این ویژگی مشخص می‌کنه که پس‌زمینه پشت یک عنصر چقدر چرخش رنگ (hue rotation) داشته باشد و رنگ‌ها به اندازه مشخصی تغییر کنند.
در Tailwind از کلاس‌های backdrop-hue-rotate-{degree} استفاده می‌کنیم.

✅ کلاس‌ها

• backdrop-hue-rotate-0 → بدون تغییر رنگ (0deg)

• backdrop-hue-rotate-15 → چرخش 15 درجه

• backdrop-hue-rotate-30 → چرخش 30 درجه

• backdrop-hue-rotate-60 → چرخش 60 درجه

• backdrop-hue-rotate-90 → چرخش 90 درجه

• backdrop-hue-rotate-180 → چرخش 180 درجه

• backdrop-hue-rotate-[-value] → چرخش منفی (جهت معکوس)

📌 می‌توان از responsive و hover هم استفاده کرد:

• hover:backdrop-hue-rotate-90 → هنگام هاور رنگ‌ها چرخش 90 درجه داشته باشند

✅ مثال

<div class="relative w-32 h-32 bg-blue-500 mb-2">
  <div class="absolute inset-0 bg-white/30 backdrop-hue-rotate-0 flex items-center justify-center">
    backdrop-hue-rotate-0
  </div>
</div>

<div class="relative w-32 h-32 bg-green-500 mb-2">
  <div class="absolute inset-0 bg-white/30 backdrop-hue-rotate-90 flex items-center justify-center">
    backdrop-hue-rotate-90
  </div>
</div>

<div class="relative w-32 h-32 bg-red-500 mb-2">
  <div class="absolute inset-0 bg-white/30 hover:backdrop-hue-rotate-180 flex items-center justify-center">
    هنگام هاور backdrop-hue-rotate-180
  </div>
</div>

📌 نکات مهم

• Backdrop Hue Rotate روی پس‌زمینه عناصر زیرین اعمال می‌شود و نه خود عنصر.

• اغلب با background-color شفاف مثل bg-white/30 یا bg-black/20 ترکیب می‌شود.

• می‌توان با transition ترکیب کرد تا افکت نرم ایجاد شود:

  • transition duration-300 hover:backdrop-hue-rotate-90