سیستم رنگ و Opacity

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

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

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

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

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

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

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

<div class="rounded-2xl border border-sky-500/20 bg-gradient-to-br from-slate-950 to-sky-950 p-8">
  <h2 class="text-2xl font-bold text-white">Dashboard</h2>
  <p class="mt-2 text-slate-300">Modern dark surface with a subtle border.</p>
</div>

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

کارت تیره با Gradient و Border نیمه‌شفاف.

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

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

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

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

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