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

✅ کلاس‌ها

• brightness-0 → کاملاً تاریک (0%)

• brightness-50 → 50% روشنایی

• brightness-75 → 75% روشنایی

• brightness-90 → 90% روشنایی

• brightness-95 → 95% روشنایی

• brightness-100 → روشنایی پیش‌فرض (100%)

• brightness-105 → 105% روشنایی

• brightness-110 → 110% روشنایی

• brightness-125 → 125% روشنایی

• brightness-150 → 150% روشنایی

• brightness-200 → 200% روشنایی

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

• hover:brightness-125 → هنگام هاور روشنایی افزایش یابد

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

✅ مثال

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

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

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

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

📌 نکات مهم

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

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

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