如何在Tailwind CSS中实现移动端隐藏指定div且不占用布局位置

你之前的写法不生效的核心原因是display属性的类优先级冲突：
hidden类本质是设置display: none，但你在类列表中后续加了全局生效的grid类（设置display: grid），相同权重的CSS类后声明的会覆盖前者，因此小屏下display: none的效果被display: grid覆盖，元素无法隐藏。同时你使用md:block也不符合需求，因为该元素本身是grid布局，设置为block会破坏原有布局结构。

正确的写法是把全局的grid改为仅md断点生效的md:grid，保留全局hidden即可，示例代码如下：

<div class="hidden md:grid max-w-7xl mx-auto sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
    <div class="col-start-2 col-span-2">
        <h3 class="text-4xl pb-3">Text 1</h3>
        <p class="text-2xl">Text 2</p>
    </div>
</div>

该写法的逻辑：

• 所有屏幕尺寸下默认应用hidden，元素隐藏且不占据页面空间
• 当屏幕宽度达到md断点（默认768px）及以上时，应用md:grid设置display: grid，元素正常显示，原有grid布局完全保留

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