tailwindlabs/tailwindcss-forms

This repository contains an official plugin for Tailwind CSS that fixes a longstanding annoyance with HTML forms. Browsers each have their own default styles for form elements like text inputs, checkboxes, dropdowns, and radio buttons, and those default styles are notoriously hard to override with utility CSS classes. This plugin resets all those browser defaults to a consistent, minimal baseline that makes form elements behave predictably when you apply Tailwind's utility classes on top. Without this plugin, styling something like a checkbox or a select dropdown with Tailwind classes often requires extra workarounds because browsers apply deeply embedded styles that resist simple overrides. After installing the plugin, you can do things like round the corners of a select dropdown or change a checkbox color using the same straightforward class approach you would use on any other element. The plugin works in two modes. The default mode applies styles globally to all matching form elements automatically. An alternative class-based mode generates explicit CSS classes like form-input, form-select, and form-checkbox that you apply manually, which is useful when integrating into an existing project where global resets might conflict with existing styles. You can also restrict the plugin to only one mode if the default combination causes problems. Installation is a two-step process: install the package via npm, then add one line to either your CSS file (Tailwind v4) or your config file (Tailwind v3). The README includes a link to a live demo showing the plugin in action.