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

✅ کلاس‌ها

• outline → فعال کردن outline با ضخامت پیش‌فرض (1px)

• outline-0 → بدون outline

• outline-1 → ضخامت 1px

• outline-2 → ضخامت 2px

• outline-4 → ضخامت 4px

• outline-8 → ضخامت 8px

📌 توجه: outline با border متفاوت است؛ خارج از باکس عنصر نمایش داده می‌شود و فضای اضافی ایجاد نمی‌کند.

✅ مثال

<button class="outline outline-black p-2 mb-2">
  Outline پیش‌فرض
</button>

<button class="outline-2 outline-red-500 p-2 mb-2">
  Outline قرمز 2px
</button>

<button class="outline-4 outline-blue-500 p-2 mb-2">
  Outline آبی 4px
</button>

<button class="outline-0 p-2 mb-2">
  بدون Outline
</button>

📌 نکات مهم

• اغلب با outline-color و outline-style ترکیب می‌شود تا ظاهر کامل outline مشخص شود.

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

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