Increase input field width - css

Question

I am new to Tailwind CSS and am trying to make a responsive search bar. When I increase the width it becomes unresponsive. How can I fix this?
<form className="flex items-center mx-4" onSubmit={submitHandler}>
<label htmlFor="simple-search" className="sr-only">Quick search</label>
<div className="relative w-full">
<input type="text"
ref={inputRef}
autoComplete="off"
id="name"
spellCheck="false" className="outline-none border-2 border-gray-300 text-gray-900 text-base rounded-lg focus:ring-slate-500 focus:border-slate-500 block w-80 pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="Search"></input>
</div>
<button type="submit" onClick={submitHandler} className="p-3 ml-2 text-sm font-medium text-white rounded-lg focus:outline-none bg-gray-700 ring-2 ring-gray-600 focus:ring-slate-500 focus:border-slate-500"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></button>
</form>

Answer 1

If you are talking the whole search bar overflows the viewport on mobile, you can checkout the Responsive Design to apply class conditionally at different breakpoints.
Example
<input className="w-full sm:w-80" />
In this way, your input bar will not be a fix width under sm breakpoint.
Another way is to set a max width to the input bar with a width: 100%;. In this way the input bar will be automatically responsive without using breakpoint condition.
Example
<input className="w-full max-w-xs" />