You can easily change the accent color of elements like checkboxes in your project using Tailwind CSS. By applying utilities such as accent-*, you can customize the accent color for form controls. For example, if you want to change the color of a checkbox when selected, you can use the accent-blue-600 class, which applies a medium-blue color. Here's how you can do it in your React component:
<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}`}
/>
In this example, the accent-blue-600 class changes the accent color of the checkbox to a blue shade when it’s checked, providing a customized and visually appealing user interface. Similarly, you can use the bg-primary class to change the background color to your desired primary color, making the design even more tailored to your brand or theme.