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

✅ کلاس‌ها

• blur-none → بدون تاری

• blur-sm → تاری کم

• blur → تاری پیش‌فرض

• blur-md → تاری متوسط

• blur-lg → تاری زیاد

• blur-xl → تاری خیلی زیاد

• blur-2xl → تاری بسیار زیاد

• blur-3xl → تاری خیلی زیاد

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

• hover:blur-lg → هنگام هاور تاری زیاد شود

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

✅ مثال

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

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

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

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

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

📌 نکات مهم

• Blur باعث می‌شود محتویات عنصر و پس‌زمینه آن تار به نظر برسد.

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

  • transition-all duration-300 hover:blur-lg