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

✅ کلاس‌ها

• grayscale-0 → بدون افکت (0%)

• grayscale یا grayscale-100 → کاملاً سیاه و سفید (100%)

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

• hover:grayscale → هنگام هاور به سیاه و سفید تبدیل شود

✅ مثال

<img class="w-32 h-32 grayscale-0 mb-2" src="https://via.placeholder.com/150" alt="تصویر رنگی">
<!-- تصویر بدون grayscale -->

<img class="w-32 h-32 grayscale mb-2" src="https://via.placeholder.com/150" alt="تصویر سیاه و سفید">
<!-- تصویر کاملاً سیاه و سفید -->

<img class="w-32 h-32 hover:grayscale mb-2" src="https://via.placeholder.com/150" alt="هاور سیاه و سفید">
<!-- هنگام هاور سیاه و سفید می‌شود -->

📌 نکات مهم

• Grayscale معمولاً روی تصاویر و عناصر رنگی اعمال می‌شود.

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

  • transition duration-300 hover:grayscale