ReactJS+TailwindCSS应用移动端导航汉堡图标不显示问题求助

问题根源 #

你的Navbar组件中，桌面端导航栏的Tailwind类使用错误：

<div className='md:show flex space-x-4 text-sm font-bold items-center'>

Tailwind CSS没有show内置类，且默认的flex会让桌面导航在所有屏幕尺寸下都显示，直接把移动端的汉堡按钮挤到不可见位置。

修复方案 #

修改桌面导航栏的className，设置为移动端隐藏、桌面端显示：

// 将原 md:show flex 替换为 hidden md:flex
<div className='hidden md:flex space-x-4 text-sm font-bold items-center'>

修复后的Navbar核心代码片段 #

{!showNavigationForMobile && (
<div className='hidden md:flex space-x-4 text-sm font-bold items-center'>
    <Link to="/" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Home</Link>
    <Link to="/gallery" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Gallery</Link>
    <Link to="/contact" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Contact</Link>
    <Link to="/about" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>About</Link>
    <button className='py-2 px-6 border bg-gray-400'>Login</button>
</div>
)}

额外优化建议 #

1. 给汉堡按钮添加样式，提升移动端可见性：

<button onClick={() => setShowNavigationForMobile(!showNavigationForMobile)} className='text-xl text-gray-800'>
    {showNavigationForMobile ? <FaTimes /> : <FaBars />}
</button>

2. 给移动端展开导航添加md:hidden类，确保仅在移动端显示：

<div className='md:hidden flex space-y-6 py-4 flex-col bg-white items-center'>

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