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

✅ کلاس‌ها

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

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

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

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

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

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

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

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

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

✅ مثال

<img class="w-32 h-32 hue-rotate-0 mb-2" src="https://via.placeholder.com/150" alt="تصویر اصلی">
<!-- بدون تغییر رنگ -->

<img class="w-32 h-32 hue-rotate-90 mb-2" src="https://via.placeholder.com/150" alt="تصویر با hue-rotate-90">
<!-- چرخش 90 درجه -->

<img class="w-32 h-32 hover:hue-rotate-180 mb-2" src="https://via.placeholder.com/150" alt="هاور hue-rotate-180">
<!-- هنگام هاور چرخش 180 درجه -->

📌 نکات مهم

• Hue Rotate معمولاً روی تصاویر و عناصر رنگی اعمال می‌شود.

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

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