Maybe take a crack at building a form module. Probably save some time.
You might want to consider using features Tailwind makes available to style with utility classes outside of markup. This is the most efficient way to apply consistent styling to markup you aren't generating or don't control. This is for v3 but there are options in v4 to do the same.
@layer base {
label {
@apply mb-1.5;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="week"],
[multiple],
textarea,
select {
@apply border-neutral-400;
}
button,
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
textarea,
select,
select[multiple],
[type='checkbox'],
[type='radio'] {
@apply focus-visible:ring-2;
@apply focus-visible:outline-none;
@apply focus-visible:ring-cerulean-600;
@apply focus-visible:ring-offset-2;
@apply focus-visible:border-inherit;
}
[type='checkbox'],
[type='radio'] {
@apply focus:ring-cerulean-600;
@apply cursor-pointer;
}
[type='checkbox']:checked,
[type='radio']:checked {
@apply bg-cerulean-600;
@apply focus-visible:bg-cerulean-600;
@apply focus:bg-cerulean-600;
@apply hover:bg-cerulean-600;
}
select {
@apply focus:ring-2;
@apply focus:outline-none;
@apply focus:ring-cerulean-600;
@apply focus:ring-offset-2;
@apply focus:border-inherit;
}
[type='submit'] {
@apply px-6;
@apply text-lg;
@apply tracking-widest;
@apply bg-cerulean;
@apply text-white;
}
}
Assuming you're a developer- get creative, build something, find a workaround. It's part of the job. After 10 years I would think that you'd have more of a "I gave this a shot but couldn't get it to work" approach to the question, especially given that the members of the PW forums are overwhelmingly positive and here to help.