如何使用Tailwind CSS实现导航栏并循环渲染分类导航项

直接替换原有容器、给元素添加对应Tailwind工具类即可，不需要额外写自定义CSS，完整可直接用的代码如下：

{/* 导航外层容器 */}
<nav className="flex items-center gap-6 px-5 py-3 bg-white border-b border-gray-100 shadow-sm">
  {categories?.data && 
    categories.data.map((category) => (
      <div 
        key={category.id} 
        onClick={() => handleClick(category.id)}
        className="text-gray-700 cursor-pointer transition-all duration-200 hover:text-blue-600 py-1"
      >
        {category.name}
      </div>
    ))
  }
</nav>

常用样式调整说明 #

• 需要导航固定在页面顶部：给外层<nav>追加fixed top-0 left-0 w-full z-50类，同时给页面最外层内容区追加pt-14（对应导航高度的内边距），避免内容被固定导航遮挡
• 需要当前选中分类高亮：新增一个存储激活分类id的状态，给分类项动态拼接类名即可，示例：

const [activeCategoryId, setActiveCategoryId] = useState(null)

// 点击事件里同步更新激活id
const handleClick = (id) => {
  setActiveCategoryId(id)
  // 原有业务逻辑
}

// 分类项类名动态判断
className={`py-1 cursor-pointer transition-all duration-200 ${
  activeCategoryId === category.id 
    ? 'text-blue-600 font-medium border-b-2 border-blue-600' 
    : 'text-gray-700 hover:text-blue-600'
}`}

• 移动端适配小屏：给外层nav追加overflow-x-auto flex-nowrap，分类项追加shrink-0，即可实现小屏下分类横向滑动浏览，不会折行挤乱布局
• 深色模式导航：把外层nav的背景类替换为bg-gray-900，默认文字类替换为text-gray-200，hover和激活态颜色对应换成浅色系即可

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