فصل 4 از 27 درس 2 از 2

رنگ، Background و Border

Rounded، Ring و Outline

بخشی از آموزش جامع Tailwind CSS

محتوای درس Rounded، Ring و Outline

Rounded، Ring و Outline را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

رنگ‌ها باید نقش معنایی داشته باشند: Surface، متن، Border، Primary، Success و Error. Modifierهای Opacity مانند /20 شفافیت را بدون ساخت رنگ جدید کنترل می‌کنند و Ring برای نمایش Focus از Border مناسب‌تر است.

روش پیاده‌سازی

  1. ابتدا رنگ پس‌زمینه و متن با کنتراست کافی انتخاب کنید.
  2. برای عمق ملایم از Border نیمه‌شفاف یا Gradient کنترل‌شده استفاده کنید.
  3. حالت Focus را با focus-visible:ring پیاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<button class="rounded-xl bg-blue-600 px-5 py-3 font-semibold text-white
  hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/30">
  ذخیره تغییرات
</button>

خروجی مورد انتظار

دکمه‌ای با Hover و Focus واضح و قابل دسترس.

نکات مهم و خطاهای رایج

  • رنگ را تنها نشانه وضعیت قرار ندهید؛ متن یا آیکون هم لازم است.
  • Outline مرورگر را بدون جایگزین قابل مشاهده حذف نکنید.

تمرین پیشنهادی

نمونه را برای حالت عادی، Hover، Focus و Disabled کامل کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS