Styling with Tailwind CSS - css

Question

I'm using Tailwindcss to style my forms but when I try to submit and catch errors for required fields, the size on input fields increases.
Form code
<Formik
initialValues={userData.signup}
onSubmit={submitData}
validationSchema={signupSchema}
>
{({ values, errors, touched, handleChange, handleSubmit }) => {
return (
<>
<Form className="grid grid-cols-2 gap-3" onSubmit={handleSubmit} id="form">
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-user-circle"></i>
</span>
<input
className={
`${touched.name && errors.name ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="name"
placeholder="Name"
value={values.name}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.name && errors.name}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-envelope"></i>
</span>
<input
className={
`${touched.email && errors.email ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="email"
name="email"
placeholder="Email"
value={values.email}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.email && errors.email}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-phone"></i>
</span>
<input
className={
`${touched.phoneNumber && errors.phoneNumber ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="text"
name="phoneNumber"
placeholder="Phone number"
value={values.phoneNumber}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.phoneNumber && errors.phoneNumber}</span>
</div>
<div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.password && errors.password ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="password"
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.password && errors.password}</span>
</div>
{/* <div className="relative flex w-full flex-wrap items-stretch mb-3">
<span className="z-10 leading-snug font-normal absolute text-center text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-lock"></i>
</span>
<input
className={
`${touched.confirmPassword && errors.confirmPassword ?
"form-input border py-3 border-red-400 placeholder-gray-400 text-gray-700 relative rounded text-sm w-full pl-10" :
"form-input border py-3 border-gray-400 placeholder-gray-400 text-gray-700 relative rounded text-sm focus:border-green-200 w-full pl-10"}`
}
type="password"
name="confirmPassword"
placeholder="Confirm Password"
value={values.confirmPassword}
onChange={handleChange}
/>
<span className="text-red-400 self-center">{touched.confirmPassword && errors.confirmPassword}</span>
</div> */}
</Form>
<SignupBtn type="submit" form="form"> Sign Up </SignupBtn>
<SocialBtns />
</>
)
}}
</Formik>
Form before error highlighting using Formik
Form after error highlighting using Formik
This is the code I used to style the forms.
Am I missing anything here? Thanks

Answer 1

Remove flex from the button container...
<div class="relative w-full flex-wrap mb-3">
<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700 w-full">
Sign Up
</button>
</div>
Codeply