Accent Color

📌 مفهوم

  • accent-color در CSS برای تعیین رنگ پیش‌فرض عناصر فرم مثل checkbox, radio و range input استفاده می‌شود.

  • در Tailwind CSS، کلاس‌های پیش‌فرض این ویژگی رو پوشش میدن و به سادگی می‌تونی رنگ دلخواه فرم‌ها رو تغییر بدی.

📑 سینتکس CSS

input[type="checkbox"] {
  accent-color: #f43f5e; /* Tailwind: rose-500 */
}

📑 کلاس‌های Tailwind

کلاستوضیح
accent-inheritاز رنگ والد پیروی می‌کند
accent-currentاز currentColor استفاده می‌کند
accent-transparentرنگ شفاف
accent-blackرنگ سیاه
accent-whiteرنگ سفید
accent-gray-50 تا accent-gray-900طیف رنگ خاکستری
accent-red-50 تا accent-red-900طیف رنگ قرمز
… و تمامی رنگ‌های Tailwind مثل blue, green, yellow و غیره

🔹 توجه: فقط روی input هایی مثل checkbox, radio و range اعمال می‌شود.

📌 مثال ساده

<label class="flex items-center space-x-2">
  <input type="checkbox" class="accent-red-500">
  <span>Subscribe to newsletter</span>
</label>

📌 نتیجه: تیک checkbox به رنگ قرمز Tailwind نمایش داده می‌شود.

📌 ترکیب با حالت‌ها

<input type="radio" class="accent-green-500 hover:accent-green-700 focus:accent-green-600">

  • Hover → رنگ تیره‌تر

  • Focus → رنگ کمی روشن‌تر

  • Tailwind این تغییرات رو با state modifiers پشتیبانی می‌کنه.

✨ نتیجه: با accent-color می‌تونی ظاهر فرم‌ها رو کاملاً به سبک Tailwind شخصی‌سازی کنی بدون نوشتن CSS اضافی.