Custom Styling with `appearance-none`

The "Gotcha" with styling native form controls is their resistance to extensive changes. The `appearance-none` utility class removes the default browser styling, allowing you to rebuild the control's look from scratch using Tailwind utilities.

Default vs. `appearance-none` Checkbox

Default Checkbox

Hard to style its box beyond accent color.

Checkbox with `appearance-none` (raw)

All browser styles are gone. It needs to be rebuilt.

Building a Custom Checkbox with `appearance-none`

Below is a basic example of how you might start to build a custom checkbox after applying `appearance-none`. The `@tailwindcss/forms` plugin automates much of this for a more robust solution.

Note: Fully custom form controls can be complex to make accessible and consistent across browsers. The `@tailwindcss/forms` plugin is highly recommended as it handles many of these intricacies for you.