技术求助：如何用Tailwind CSS实现导航栏黑色条一体化？

要实现目标效果，核心是把中间的三个导航按钮（Explore、Categories、About）放在同一个容器内，统一控制背景和圆角，而非让每个按钮独立设置样式。具体修改如下：

1. 修改Nav组件 #

移除每个按钮独立的bg-white和rounded-full样式，只保留内边距与文字样式：

const Nav = ({title}) => {
  return (
    <button className='p-4 px-6 font-medium text-sm'>
      {title}
    </button>
  )
}

2. 调整主容器结构 #

用带背景和圆角的flex容器包裹中间三个Nav按钮，同时优化主容器的间距控制：

return (
  <div className='flex justify-center items-center gap-4'>
    <button className='p-4 rounded-full bg-white text-gray-500'>
      <VscMenu />
    </button>
    {/* 包裹中间导航按钮的容器，统一设置背景和圆角 */}
    <div className='flex bg-white rounded-full'>
      <Nav title='Explore'/>
      <Nav title='Categories'/>
      <Nav title='About'/>
    </div>
    <button className='bg-black text-white font-medium text-sm p-4 px-6 rounded-full'>
      Sign Up
    </button>
  </div>
)

效果说明 #

• 中间三个按钮共享同一个白色背景的圆角容器，视觉上合并为一个整体
• 主容器用gap-4替代原有的mr-4/ml-4，间距更统一规范
• 保留两侧按钮的独立圆角样式，匹配目标效果的布局

内容的提问来源于stack exchange，提问作者Jakub Polański