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

✅ کلاس‌ها

• saturate-0 → بدون اشباع (0%)

• saturate-50 → 50% اشباع

• saturate-100 → اشباع پیش‌فرض (100%)

• saturate-150 → 150% اشباع

• saturate-200 → 200% اشباع

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

• hover:saturate-150 → هنگام هاور رنگ‌ها اشباع بیشتری پیدا کنند

• sm:saturate-50 md:saturate-200 → موبایل کم، دسکتاپ زیاد

✅ مثال

<img class="w-32 h-32 saturate-0 mb-2" src="https://via.placeholder.com/150" alt="بدون اشباع">
<!-- اشباع 0% -->

<img class="w-32 h-32 saturate-100 mb-2" src="https://via.placeholder.com/150" alt="اشباع پیش‌فرض">
<!-- اشباع 100% -->

<img class="w-32 h-32 saturate-150 mb-2" src="https://via.placeholder.com/150" alt="اشباع 150%">
<!-- اشباع 150% -->

<img class="w-32 h-32 hover:saturate-200 mb-2" src="https://via.placeholder.com/150" alt="هاور اشباع 200%">
<!-- هنگام هاور اشباع 200% -->

📌 نکات مهم

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

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

  • transition duration-300 hover:saturate-150