使用 tailwind 的响应式工具类，可通过 hidden sm:block 实现“仅桌面可见、移动端隐藏”的效果，而非误用 lg 断点导致逻辑反转。
在 Tailwind CSS 中，响应式工具类遵循 移动优先（mobile-first） 设计原则：默认样式作用于最小屏幕（如手机），而带断点前缀的类（如 sm:, md:, lg:）则在对应及更大屏幕下生效。
你最初使用的 <nav class="hidden lg:block">abc</nav> 实际含义是：
✅ 在 lg（≥1024px）及以上屏幕显示；
❌ 在所有更小屏幕（包括 sm、md、xs）均保持隐藏——这正是你观察到“桌面隐藏、手机反而显示”的反直觉现象的根源（实际是手机端因未触发 lg:block 而继承了 hidden）。
✅ 正确做法是：在小屏幕隐藏，从 sm（≥640px）起显示，即：
<nav class="hidden sm:block">abc</nav>
- hidden → 默认（xs）隐藏
- sm:block → 在 sm 及以上（平板、桌面）覆盖为 block，实现“仅桌面/平板可见”
? Tailwind 默认断点参考：sm: ≥640px｜md: ≥768px｜lg: ≥1024px｜xl: ≥1280px｜2xl: ≥1536px
✅ 完整示例（含卡片组件）
以下代码在移动端完全隐藏 .card 区域，仅在平板及以上设备显示：
<div class="hidden sm:block relative bg-white px-6 pt-10 mt-10 pb-8 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="mx-auto max-w-md">
<div class="divide-y divide-gray-300/50">
<div class="space-y-6 py-8 text-base leading-7 text-gray-600">
<ul class="space-y-4">
<li class="flex items-center">
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11" />
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
</svg>
<p class="ml-4">Customizing your tailwind.config.js file</p>
</li>
<!-- 更多列表项... -->
</ul>
</div>
</div>
</div>
</div>⚠️ 注意事项
- ❌ 避免混用 visible / invisible：它们不具有响应式变体（如 sm:visible 不生效），且 invisible 仅隐藏视觉但保留布局空间，不适合此场景。
- ✅ 若需“仅移动端显示、桌面隐藏”，则用 block sm:hidden。
- ? 始终检查断点语义：sm 是首个 向上生效 的断点，适合“小屏隐藏、大屏显示”的典型需求。
掌握移动优先逻辑与断点含义，就能精准控制各设备下的元素显隐，避免常见响应式陷阱。
立即学习“前端免费学习笔记（深入）”；
