Gotcha:
Trying to extensively style the
shape and size
of native checkboxes/radios with standard Tailwind utility classes (like
w-10
,
h-10
,
bg-red-500
for the box itself) without the
@tailwindcss/forms
plugin or using
appearance-none
is very difficult. The
accent-*
classes only change the tint of the browser's default control.
Notice below:
w-10 h-10 rounded-full bg-yellow-200 border-2 border-yellow-500
are applied to the input.
However, these classes do not change the visual appearance of the native checkbox itself as they would for a
<div>
.
The browser still renders its default checkbox, possibly slightly larger due to `h-10 w-10` affecting its bounding box, but the visible control is not a yellow circle. The `accent-color` would still work though.
To truly customize the look beyond accent color, you need to either:
@tailwindcss/forms
plugin, which provides pre-styled form elements that are easier to customize.
appearance-none
on the input and then rebuild its appearance from scratch using Tailwind utilities (demonstrated in the next example).