TailwindCSS移动端隐藏dropdown菜单 直接展示所有按钮无需点击

你只需要利用Tailwind CSS的移动端优先断点规则，给对应元素增加断点类即可，调整逻辑如下：

• 触发下拉的按钮仅在大屏（≥768px，对应md断点）显示，移动端直接隐藏
• 下拉菜单ul在移动端默认展开、走正常文档流布局，大屏时恢复原来的绝对定位+隐藏的下拉逻辑
• 不需要修改原有大屏端的交互逻辑，不会影响桌面端使用

修改后的完整代码如下：

<div class="p-0">
    <div class="dropdown inline-block relative">
        <button
            style={{ color: '#155610' }}
            <!-- 新增hidden md:inline-flex，移动端隐藏按钮，大屏才显示 -->
            class="bg-white font-semibold py-2 px-4 rounded hidden md:inline-flex items-center"
        >
            <span class="mr-1">Resources</span>
            <svg
                class="fill-current h-4 w-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
            >
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
            </svg>
        </button>
        <!-- 修改ul类：移动端默认block+相对布局，大屏恢复hidden+绝对定位 -->
        <ul class="dropdown-menu text-black pt-1 block relative md:hidden md:absolute">
            <li class="bg-white">
                <Link to="/Resources">
                    <div
                        style={{ color: '#155610' }}
                        class="rounded-t bg-white hover:bg-white py-2 px-4 block whitespace-no-wrap"
                    >
                        Blog
                    </div>
                </Link>
            </li>
            <li class="bg-white">
                <Link to="/podcast">
                    <div
                        style={{ color: '#155610' }}
                        class="rounded-t bg-white hover:bg-white py-2 px-4 block whitespace-no-wrap"
                    >
                        Podcast
                    </div>
                </Link>
            </li>
        </ul>
    </div>
</div>

如果需要调整切换的屏幕尺寸，把代码里的md替换为sm（对应640px）或者lg（对应1024px）即可。你之前隐藏元素会连带按钮一起消失，是因为没有加断点前缀，样式在全屏幕尺寸生效，加了断点前缀后就只会在对应尺寸范围生效。

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