The `accent-{color}-{shade}` classes are useful for quick color changes, but they don't allow for extensive customization of the shape, size, or overall appearance of checkboxes and radio buttons.
Trying to extensively style the shape and size of native checkboxes/radios *without* the `@tailwindcss/forms` plugin or using `appearance-none` (and then rebuilding the look from scratch) is very difficult. The `accent-*` classes only change the color of the browser's default controls (e.g., the tick mark or the radio dot). They do not affect the box or circle outline itself significantly.
Observe that while `accent-red-500` changes the tick color, general Tailwind size (`w-8 h-8`) or border utilities (`border-2 border-blue-500`) have minimal impact on the native checkbox appearance. For such custom styling, `appearance-none` or the `@tailwindcss/forms` plugin is generally required.
For full control over the appearance of form elements, including checkboxes and radio buttons, you would typically:
@tailwindcss/forms
plugin, which provides pre-styled, customizable form elements.
appearance-none
to remove default browser styling and then rebuild the element's appearance from scratch using Tailwind utilities. This is shown in the next example.