Tailwind CSS增大输入框宽度后搜索栏失响应式修复方法

输入框上写死的固定宽度类w-80（对应固定320px宽度）会覆盖自适应宽度规则，小屏场景下会直接撑破父容器、溢出视口，直接破坏响应式布局。

• 删掉输入框上的固定宽度类w-80，替换为w-full，让输入框宽度完全跟随父容器变化
• 给包裹输入框的父级div增加flex-1类，在flex布局下让输入框区域自动占据剩余可用空间，不会挤压搜索按钮
• 给搜索按钮增加shrink-0类，避免小屏下按钮被输入框挤压变形
• 如果需要限制输入框的最大宽度，不要用固定宽度类，改用max-w-*类（比如max-w-xl），配合响应式断点可以实现不同屏幕下的宽度控制，不会破坏适配效果。

<form className="flex items-center mx-4" onSubmit={submitHandler}>
    <label htmlFor="simple-search" className="sr-only">Quick search</label>
    <div className="relative w-full flex-1">
        <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-full pl-4 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" 
            placeholder="Search"
        />
    </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 shrink-0"
    >
        <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" />
        </svg>
    </button>
</form>

补充：如果需要在更大屏幕下让搜索栏更宽，可以给输入框父容器加响应式最大宽度，比如md:max-w-md lg:max-w-2xl，这类规则只会限制宽度上限，小屏下依然会自动适配满可用宽度，不会出现布局错乱。

内容的提问来源于stack exchange，提问作者Rohith Nambiar