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

✅ کلاس‌ها

• outline-offset-0 → بدون فاصله (default)

• outline-offset-1 → فاصله 1px

• outline-offset-2 → فاصله 2px

• outline-offset-4 → فاصله 4px

• outline-offset-8 → فاصله 8px

• outline-offset-[value] → فاصله دلخواه با px, rem, em و غیره

📌 این ویژگی به ایجاد فضای بین outline و عنصر کمک می‌کند و معمولاً برای تمرکز (focus) یا استایل خاص استفاده می‌شود.

✅ مثال

<button class="outline outline-black outline-2 outline-offset-0 p-2 mb-2">
  فاصله 0px
</button>

<button class="outline outline-red-500 outline-2 outline-offset-2 p-2 mb-2">
  فاصله 2px
</button>

<button class="outline outline-green-500 outline-2 outline-offset-4 p-2 mb-2">
  فاصله 4px
</button>

<button class="outline outline-blue-500 outline-2 outline-offset-8 p-2 mb-2">
  فاصله 8px
</button>

📌 نکات مهم

• اغلب همراه با outline-width, outline-color و outline-style استفاده می‌شود.

• می‌توان با responsive ترکیب کرد:

  • sm:outline-offset-2 md:outline-offset-4 → موبایل فاصله 2px، دسکتاپ 4px