📌 این ویژگی مشخص می‌کنه که یک عنصر رنگ‌هایش معکوس شوند، یعنی همه رنگ‌ها به رنگ مقابلشان تبدیل شوند.
در Tailwind از کلاس‌های invert-{value} استفاده می‌کنیم.

✅ کلاس‌ها

• invert-0 → بدون تغییر (0%)

• invert یا invert-100 → کاملاً معکوس (100%)

• می‌توان درصد دلخواه هم با کلاس سفارشی اعمال کرد: invert-[50%]

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

• hover:invert → هنگام هاور رنگ‌ها معکوس شوند

✅ مثال

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

<img class="w-32 h-32 invert mb-2" src="https://via.placeholder.com/150" alt="تصویر معکوس">
<!-- کاملاً معکوس -->

<img class="w-32 h-32 hover:invert mb-2" src="https://via.placeholder.com/150" alt="هاور invert">
<!-- هنگام هاور معکوس می‌شود -->

📌 نکات مهم

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

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

  • transition duration-300 hover:invert