TailwindCSS移动端隐藏段落：如何实现display:none不占位效果

1. 实现移动端完全隐藏（不占位） #

把目标段落的invisible collapse lg:visible替换为hidden md:block：

• hidden：默认（移动端）设置display:none，元素完全不占据屏幕空间
• md:block：平板（md断点，默认768px及以上）恢复display:block显示元素

Tailwind中invisible仅控制visibility:hidden和opacity:0，元素仍保留布局空间；而hidden才是真正实现display:none的类，完全符合你的需求。

2. 平板尺寸样式微调 #

针对平板（md）屏幕，直接给元素添加md:前缀的类即可按需调整样式：

• 比如给段落加md:pb-6 lg:pb-8，实现平板时底部内边距更小，大屏恢复原大小
• 也可根据需求添加md:text-left、md:mx-4这类类调整对齐方式、外边距等

修改后的完整代码 #

<section style="background-color:rgba(216, 216, 216, 0.8);">
    <div class="container md:px-28 mx-auto pt-8 pb-12">
        <p class="text-3xl text-center pt-8 pb-6 lg:ml-16 lg:mr-16 lg:pl-16 lg:pr-16"><span style="color: #e11837;">Certified courses</span> to build your employees need to drive change in your organization</p>
        <!-- 修改类实现移动端隐藏不占位，平板及以上显示，同时添加平板样式微调 -->
        <p class="text-base text-center pb-8 hidden md:block md:pb-6 lg:pb-8">CEDA’s micro-learning courses develop critical thinking, build leadership acumen and knowledge in areas such as public policy, economics and ESG – ready for application in an increasingly competitive business environment.</p>
        <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-10 pt-2">
            <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/esg_fundamentals.png); max-height:100%; max-width:100%; object-fit: contain;">
                <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                <p class="text-base text-center text-white pb-4">ESG Fundamentals</p>
                <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Understand Environmental, Social and Governance fundamentals and key concepts that impact organisations, now and into the future.</p>
                <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
            </div>
            <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/economics_for_non_economists.jpg); max-height:100%; max-width:100%; object-fit: contain;">
                <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                <p class="text-base text-center text-white pb-4">Economics for Non-Economists</p>
                <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Gain insights into economic thinking, tools and principles, supply and demand, macroeconomics, fiscal and monetary policy, plus more.</p>
                <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
            </div>
            <div class="block bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]" style="background-image: url(Assets/public_policy_dynamics.png); max-height:100%; max-width:100%;">
                <p class="text-base text-center text-red border-b-2 border-white ml-16 mr-16 mb-4 pb-4 pt-6"><strong>Online learning</strong></p>
                <p class="text-base text-center text-white pb-4">Public Policy Dynamics</p>
                <p class="text-xs text-center text-white pb-4 lg:mr-6 lg:ml-6">Identify key drivers of public policy, gain leadership perspectives and learn practical applications to influence better outcomes.</p>
                <p class="text-sm text-center text-white font-bold pb-6"><a href="">View brochure -></a></p>
            </div>
        </div>
    </div>
</section>

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