Increase input field width-CodePudding

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>

CodePudding user response：

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" />