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

✅ کلاس‌ها

• opacity-0 → کاملاً شفاف (0%)

• opacity-5 → 5% شفافیت

• opacity-10 → 10% شفافیت

• opacity-20 → 20% شفافیت

• opacity-25 → 25% شفافیت

• opacity-30 → 30% شفافیت

• opacity-40 → 40% شفافیت

• opacity-50 → 50% شفافیت

• opacity-60 → 60% شفافیت

• opacity-70 → 70% شفافیت

• opacity-75 → 75% شفافیت

• opacity-80 → 80% شفافیت

• opacity-90 → 90% شفافیت

• opacity-95 → 95% شفافیت

• opacity-100 → کاملاً دیده می‌شود (100%)

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

• hover:opacity-50 → هنگام هاور شفافیت 50% شود

• sm:opacity-20 md:opacity-80 → موبایل 20%، دسکتاپ 80%

✅ مثال

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

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

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

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

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

📌 نکات مهم

• Opacity روی تمام محتوای عنصر اعمال می‌شود، شامل متن و تصویر داخل آن.

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

  • transition-opacity duration-300 hover:opacity-50