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

✅ کلاس‌ها

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

• sepia یا sepia-100 → کاملاً sepia (100%)

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

• hover:sepia → هنگام هاور افکت sepia اعمال شود

✅ مثال

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

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

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

📌 نکات مهم

• Sepia معمولاً روی تصاویر و عناصر رنگی اعمال می‌شود تا سبک قدیمی و کلاسیک ایجاد کند.

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

  • transition duration-300 hover:sepia