The input fields below use
border rounded px-3 py-2
for consistent styling.
Remember the "Gotcha": for best results and to avoid browser inconsistencies, the
@tailwindcss/forms
plugin is highly recommended in real projects.
A Note on Form Styling (The "Gotcha"):
The classes
border rounded px-3 py-2
provide a good starting point. However, browser default styles for form inputs can be very inconsistent.
For robust and consistent styling across all browsers, the
@tailwindcss/forms plugin
is highly recommended.
It provides a sensible reset to form elements, making them easier to style with utilities. This example doesn't use the plugin (as it's CDN-only here), but you should use it in your projects!