چک باکس خود را سفارشی کنید: بدون زحمت رنگ های تاکیدی را با Tailwind CSS تغییر دهید!

با استفاده از Tailwind CSS به راحتی می توانید رنگ تاکیدی عناصری مانند چک باکس ها را در پروژه خود تغییر دهید. با استفاده از ابزارهایی مانند accent-*، می توانید رنگ تاکید را برای کنترل های فرم سفارشی کنید. به عنوان مثال، اگر می خواهید رنگ یک چک باکس را هنگام انتخاب تغییر دهید، می توانید از کلاس accent-blue-600 استفاده کنید که یک رنگ آبی متوسط ​​را اعمال می کند. در اینجا نحوه انجام این کار در کامپوننت React آورده شده است:

<input
  type="checkbox"
  checked={selectedRole.includes(role.id)}
  onChange={() => handleRolesSelect(role.id)}
  className="h-3 w-3 accent-blue-600 cursor-pointer"
  id={`role-checkbox-${role.id}`}
/>

در این مثال، کلاس accent-blue-600 با علامت زدن، رنگ تاکید کادر را به سایه آبی تغییر می‌دهد و یک رابط کاربری سفارشی و از نظر بصری جذاب ارائه می‌کند. به طور مشابه، می‌توانید از کلاس bg-primary برای تغییر رنگ پس‌زمینه به رنگ اصلی دلخواه خود استفاده کنید، و طراحی را حتی بیشتر با برند یا موضوع شما مطابقت دهید.