Tailwind CSS标签页下划线无法填充完整宽度问题求助

我看了你的代码，问题出在激活状态的下划线（border-b-2）是加在<button>元素上的——而<button>用了inline-block，它的宽度是由内部文本+p-4的内边距决定的，自然没法填满整个标签项的宽度。要让Deposit标签的下划线变成全宽，我们可以调整布局结构，把下划线样式转移到父元素<li>上，具体修改如下：

修改后的完整代码 #

function MyPage() { 
  const [currentTab, setCurrentTab] = useState<string>("deposit"); 
  const [inputValue, setInputValue] = useState<string>(""); 
  const [outputValue, setOutputValue] = useState<string>(); 

  function classNames(...classes: string[]) { 
    return classes.filter(Boolean).join(" "); 
  } 

  return( 
    <div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700"> 
      <ul className="flex flex-wrap -mb-px"> 
        <li className={classNames(
          "mr-2 flex-1",
          currentTab == "withdrawal" ? "border-b-2 border-gray-100" : ""
        )}> 
          <button 
            onClick={() => { 
              setCurrentTab("withdrawal");
              if(currentTab != "withdrawal") setOutputValue("");
            }} 
            className={classNames(
              currentTab == "withdrawal" 
                ? "text-gray-100 w-full p-4 rounded-t-lg" 
                : "text-gray-500 dark:text-gray-400 w-full p-4 rounded-t-lg transition-all ease-in duration-100 hover:text-gray-700 dark:hover:text-gray-300"
            )} 
          > 
            Withdrawal 
          </button> 
        </li> 
        <li className={classNames(
          "mr-2 flex-1",
          currentTab == "deposit" ? "border-b-2 border-gray-100" : ""
        )}> 
          <button 
            onClick={() => { 
              setCurrentTab("deposit");
              if(currentTab != "deposit") setOutputValue("");
            }} 
            className={classNames(
              currentTab == "deposit" 
                ? "text-gray-100 w-full p-4 rounded-t-lg" 
                : "text-gray-500 dark:text-gray-400 w-full p-4 rounded-t-lg transition-all ease-in duration-100 hover:text-gray-700 dark:hover:text-gray-300"
            )} 
            aria-current="page" 
          > 
            Deposit 
          </button> 
        </li> 
      </ul> 
    </div> 
  ) 
}

关键修改点说明 #

• 把下划线样式移到<li>上：激活状态的border-b-2 border-gray-100不再加在button上，而是加到对应的<li>标签。因为<li>是flex容器（ul用了flex）的子项，我们通过flex-1让每个标签项平分可用宽度，这样下划线自然就会填满整个标签的宽度。
• 让按钮占满父元素宽度：给每个<button>加上w-full，确保按钮点击区域覆盖整个标签项，同时视觉上也和标签项宽度对齐。
• 优化样式逻辑：调整了按钮的文字颜色和hover状态，让未激活标签的样式更贴合Tailwind的默认设计，同时修复了原代码中逗号分隔语句的小问题（改成更易读的分号+if语句）。

这样修改后，Deposit标签激活时的下划线就会完整填充整个标签的宽度了~

内容的提问来源于stack exchange，提问作者Furkan Öztürk