📌 این ویژگی فاصله بین متن و خط زیرین (underline) رو مشخص می‌کنه.
در Tailwind از کلاس‌های underline-offset-{n} استفاده می‌کنیم.

✅ کلاس‌ها

• underline-offset-0 → خط چسبیده به متن

• underline-offset-1 → فاصله کم

• underline-offset-2 → فاصله متوسط

• underline-offset-4 → فاصله بیشتر

• underline-offset-8 → فاصله خیلی زیاد

📌 عددها معمولاً بر اساس پیکسل هستند.

✅ مثال

<p class="underline underline-offset-0 mb-2">
  خط زیر متن بدون فاصله
</p>

<p class="underline underline-offset-1 mb-2">
  خط زیر متن با فاصله کم
</p>

<p class="underline underline-offset-2 mb-2">
  خط زیر متن با فاصله متوسط
</p>

<p class="underline underline-offset-4 mb-2">
  خط زیر متن با فاصله زیاد
</p>

<p class="underline underline-offset-8 mb-2">
  خط زیر متن با فاصله خیلی زیاد
</p>

📌 نکات مهم

• این کلاس‌ها فقط زمانی تاثیر دارند که underline فعال باشد.

• می‌تونی با decoration-color, decoration-style, decoration-thickness همزمان رنگ، سبک و ضخامت خط رو کنترل کنی:

<p class="underline underline-offset-4 decoration-red-500 decoration-2 decoration-dotted">
  خط زیر متن قرمز، ضخیم، نقطه‌ای و با فاصله
</p>