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

✅ کلاس‌ها

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

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

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

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

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

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

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

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

• hover:drop-shadow-lg → هنگام هاور سایه بزرگ شود

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

✅ مثال

<div class="w-32 h-16 bg-blue-500 drop-shadow-sm mb-2">
  drop-shadow-sm
</div>

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

<div class="w-32 h-16 bg-red-500 drop-shadow-lg mb-2">
  drop-shadow-lg
</div>

<div class="w-32 h-16 bg-yellow-500 drop-shadow-xl mb-2">
  drop-shadow-xl
</div>

<div class="w-32 h-16 bg-purple-500 drop-shadow-2xl mb-2">
  drop-shadow-2xl
</div>

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

📌 نکات مهم

• Drop Shadow مشابه Box Shadow است ولی افکت آن معمولاً روی تصاویر و متن بهتر نمایان می‌شود.

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

  • transition-shadow duration-300 hover:drop-shadow-lg