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

✅ کلاس‌ها

• contrast-0 → کاملاً بدون کنتراست (0%)

• contrast-50 → 50% کنتراست

• contrast-75 → 75% کنتراست

• contrast-100 → کنتراست پیش‌فرض (100%)

• contrast-125 → 125% کنتراست

• contrast-150 → 150% کنتراست

• contrast-200 → 200% کنتراست

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

• hover:contrast-150 → هنگام هاور کنتراست افزایش یابد

• sm:contrast-75 md:contrast-150 → موبایل کم، دسکتاپ زیاد

✅ مثال

<div class="w-32 h-16 bg-blue-500 contrast-50 mb-2">
  contrast-50
</div>

<div class="w-32 h-16 bg-green-500 contrast-100 mb-2">
  contrast-100
</div>

<div class="w-32 h-16 bg-red-500 contrast-125 mb-2">
  contrast-125
</div>

<div class="w-32 h-16 bg-yellow-500 hover:contrast-150 mb-2">
  هنگام هاور contrast-150
</div>

📌 نکات مهم

• Contrast روی کل عنصر اعمال می‌شود، شامل متن، تصویر و پس‌زمینه.

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

  • transition-all duration-300 hover:contrast-125