This input has no Tailwind styling. Its appearance is determined by browser defaults.
Styled with
border border-sky-400 rounded px-3 py-2
.
As you can see with the "Default Browser Input" above, form inputs can look very different across various browsers if not explicitly styled.
While Tailwind classes like
border
,
rounded
,
px-3
, and
py-2
provide a good starting point for custom styling,
they are applied on top of existing browser defaults.
For more robust and consistent form styling, especially for complex forms or to reset more deeply ingrained browser styles,
the
@tailwindcss/forms
plugin
is highly recommended. This plugin provides a set of sensible defaults
and makes styling form elements much easier and more predictable.
(Note: The
@tailwindcss/forms
plugin is not included in this CDN setup but would be added to your
tailwind.config.js
in a typical project.)