📌 این ویژگی مشخص می‌کنه که رنگ سایه (shadow) یک عنصر چه رنگی باشد.
در Tailwind از کلاس‌های shadow-[color] استفاده می‌کنیم.

✅ کلاس‌ها

Tailwind به‌طور پیش‌فرض سایه‌ها را خاکستری ایجاد می‌کند، ولی می‌توان رنگ دلخواه را اضافه کرد:

• shadow-black → سایه سیاه

• shadow-white → سایه سفید

• shadow-red-500 → سایه قرمز

• shadow-green-500 → سایه سبز

• shadow-blue-500 → سایه آبی

• shadow-yellow-500 → سایه زرد

📌 برای رنگ دلخواه می‌توان از hex یا rgb استفاده کرد:

• shadow-[rgba(255,87,51,0.5)] → سایه نیمه شفاف

✅ مثال

<div class="w-32 h-16 bg-blue-500 shadow-lg shadow-black mb-2">
  سایه سیاه
</div>

<div class="w-32 h-16 bg-green-500 shadow-lg shadow-red-500 mb-2">
  سایه قرمز
</div>

<div class="w-32 h-16 bg-red-500 shadow-lg shadow-green-500 mb-2">
  سایه سبز
</div>

<div class="w-32 h-16 bg-yellow-500 shadow-lg shadow-[rgba(0,0,255,0.5)] mb-2">
  سایه آبی نیمه شفاف
</div>

📌 نکات مهم

• Box Shadow Color همیشه همراه با shadow-size استفاده می‌شود تا ظاهر کامل سایه مشخص شود.

• می‌توان با responsive ترکیب کرد:

  • sm:shadow-black md:shadow-red-500 → موبایل سیاه، دسکتاپ قرمز