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

✅ کلاس‌ها

• outline-black → رنگ سیاه

• outline-white → رنگ سفید

• outline-gray-500 → رنگ خاکستری

• outline-red-500 → رنگ قرمز

• outline-green-500 → رنگ سبز

• outline-blue-500 → رنگ آبی

• outline-yellow-500 → رنگ زرد

📌 می‌توان از رنگ دلخواه هم استفاده کرد:

• outline-[#ff5733] → رنگ HEX دلخواه

✅ مثال

<button class="outline outline-black p-2 mb-2">
  Outline سیاه
</button>

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

<button class="outline-4 outline-green-500 p-2 mb-2">
  Outline سبز
</button>

<button class="outline-4 outline-[#ff5733] p-2 mb-2">
  Outline رنگ دلخواه
</button>

📌 نکات مهم

• Outline Color معمولاً همراه با outline-width و outline-style استفاده می‌شود تا ظاهر کامل مشخص شود.

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

  • sm:outline-gray-500 md:outline-blue-500 → موبایل خاکستری، دسکتاپ آبی