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

✅ کلاس‌ها

اندازه سایه

• shadow-sm → سایه کوچک

• shadow → سایه پیش‌فرض

• shadow-md → سایه متوسط

• shadow-lg → سایه بزرگ

• shadow-xl → سایه خیلی بزرگ

• shadow-2xl → سایه بسیار بزرگ

• shadow-inner → سایه داخل عنصر

• shadow-none → بدون سایه

رنگ سایه

• Tailwind پیش‌فرض سایه‌ها را با رنگ gray ایجاد می‌کند، ولی می‌توان با custom shadow و shadow-[color] رنگ دلخواه اعمال کرد.

✅ مثال

<div class="w-32 h-16 bg-blue-500 shadow-sm mb-2">
  سایه کوچک
</div>

<div class="w-32 h-16 bg-green-500 shadow mb-2">
  سایه پیش‌فرض
</div>

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

<div class="w-32 h-16 bg-yellow-500 shadow-xl mb-2">
  سایه خیلی بزرگ
</div>

<div class="w-32 h-16 bg-purple-500 shadow-inner mb-2">
  سایه داخل عنصر
</div>

<div class="w-32 h-16 bg-gray-500 shadow-none mb-2">
  بدون سایه
</div>

📌 نکات مهم

• اغلب Box Shadow همراه با border-radius استفاده می‌شود تا ظاهر نرم و سه‌بعدی ایجاد شود.

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

  • sm:shadow-sm md:shadow-lg → موبایل سایه کوچک، دسکتاپ سایه بزرگ

• برای تغییر رنگ سایه، باید custom shadow در فایل Tailwind تعریف شود یا با کلاس‌های utility [shadow-color] استفاده شود.