如何根据useState状态变化修改Tailwind CSS样式？

你只需要根据expanded状态动态设置nav的宽度类即可，用三元运算符结合模板字符串就能实现，以下是修改后的完整代码：

export function Menu(){
  const [expanded, setExpanded] = useState(true);
  return(
    <aside className="h-screen">
      <nav className={`h-full flex flex-col bg-sidebar ${expanded ? 'w-[260px]' : 'w-[85px]'}`}>
        <div>
          <button onClick={()=>setExpanded((curr)=> !curr)}>
            <img src="/Menu.png" alt="menuLogo" className="absolute top-4 ml-[23px]"/>
          </button>
        </div>
      </nav>
    </aside>
  )
}

关键说明： #

• 将原本固定的w-[260px]替换为动态判断：当expanded为true时使用w-[260px]，为false时切换为w-[85px]
• 用模板字符串包裹className，实现静态类与动态类的拼接
• 点击按钮时会翻转expanded状态，进而触发宽度的切换

如果想要平滑的过渡效果，可以给nav添加transition-all duration-300类，让宽度变化带有动画：

<nav className={`h-full flex flex-col bg-sidebar transition-all duration-300 ${expanded ? 'w-[260px]' : 'w-[85px]'}`}>

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