Tailwind CSS元素显隐问题：小屏中屏隐藏，大屏及以上显示

核心问题分析 #

你之前的写法存在两个关键错误：

1. Tailwind是移动端优先框架，sm:hidden的作用是≥640px（sm断点及以上）隐藏元素，和你要小屏隐藏的需求完全相反；
2. Tailwind没有md:visible这类有效显示控制类——visible是控制visibility属性的，而元素是否显示由display属性决定，display:none的元素加visible也不会显示。

正确实现方式 #

要实现「小屏、中屏隐藏，大屏及以上显示」，直接用默认隐藏 + 大屏断点显示的组合：

<!-- 根据元素实际布局需求，替换block为inline/flex等对应display类 -->
<div class="hidden lg:block">仅在大屏及以上显示的内容</div>

逻辑说明（基于Tailwind默认断点） #

• 小屏（<640px）：应用基础类hidden，元素隐藏
• 中屏（640px ≤ 宽度 < 1024px）：无覆盖类，保持hidden，元素隐藏
• 大屏及以上（≥1024px）：lg:block覆盖hidden，元素正常显示

如果你的项目自定义了断点范围，只需把lg换成你大屏对应的断点前缀即可。

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