如何在Tailwind中让搜索框(input)与自动补全列表(ul)尺寸一致？

你的问题核心出在两个地方：

• 绝对定位的<ul>没有正确的定位参照：<ul>用了absolute，但父元素<form>没设置relative，导致它的宽度参照的是外层带sticky的容器，而<input>的宽度是基于<form>计算的，两者参照容器不同，尺寸自然对不齐。
• 内边距和边框不统一：<input>有px-4的水平内边距，<ul>却没有，加上边框设置的差异，视觉上进一步放大了尺寸偏差。

按下面的步骤修改代码就能解决：

1. 给<form>添加relative类，让<ul>的绝对定位以<form>为参照，这样两者的w-full就会基于同一个容器计算宽度。
2. 给<ul>加上px-4，和<input>保持一致的水平内边距，消除内容区域的宽度差。
3. 给<ul>加mt-[-1px]，抵消边框的宽度，让<ul>和<input>的边框完美衔接，避免出现缝隙。

修改后的完整代码：

<div className="sticky top-20 z-40 w-full px-1 sm:p-5 md:p-10">
  <div className="gap-1">
    <form onSubmit={handleSearchClick} className="relative">
      <input
        enterKeyHint="search"
        type="search"
        className={`w-full bg-white px-4 py-2 text-gray-700 ${autoResults.length > 0 ? "rounded-tl-3xl rounded-tr-3xl" : "rounded-full"} z-10 border focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40`}
        placeholder="🔍 Search for products"
        onChange={handleInput}
        onClick={() => {
          setAutoResults(searchInput.length > 0 ? trackResults : []);
        }}
        value={searchInput}
      />
      {autoResults.length > 0 && (
        <ul className="absolute w-full mt-[-1px] rounded-bl-3xl rounded-br-3xl border-r border-l border-b bg-white focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 px-4">
          {autoResults.map((result: any) => {
            return (
              <li
                className="cursor-pointer border-gray-300 p-2 text-gray-700 hover:bg-blue-400"
                key={result._id}
                onClick={() => handleSelect(result._id)}
              >
                {result._id}
              </li>
            );
          })}
        </ul>
      )}
    </form>
  </div>
</div>

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