使用 tailwind 的响应式工具类，可通过 hidden sm:block 实现“仅桌面可见、移动端隐藏”的效果，而非误用 lg 断点导致逻辑反转。
在 Tailwind CSS 中，响应式工具类遵循 移动优先（mobile-first） 设计原则：默认样式作用于最小屏幕（如手机），而带断点前缀的类（如 sm:, md:, lg:）则在对应及更大屏幕下生效。
你最初使用的 实际含义是：
✅ 在 lg（≥1024px）及以上屏幕显示；
❌ 在所有更小屏幕（包括 sm、md、xs）均保持隐藏——这正是你观察到“桌面隐藏、手机反而显示”的反直觉现象的根源（实际是手机端因未触发 lg:block 而继承了 hidden）。
✅ 正确做法是：在小屏幕隐藏，从 sm（≥640px）起显示，即：
- hidden → 默认（xs）隐藏
- sm:block → 在 sm 及以上（平板、桌面）覆盖为 block，实现“仅桌面/平板可见”
? Tailwind 默认断点参考：sm: ≥640px｜md: ≥768px｜lg: ≥1024px｜xl: ≥1280px｜2xl: ≥1536px
✅ 完整示例（含卡片组件）
以下代码在移动端完全隐藏 .card 区域，仅在平板及以上设备显示：
Find JSON Path Online
下载
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
Customizing your tailwind.config.js file
⚠️ 注意事项
- ❌ 避免混用 visible / invisible：它们不具有响应式变体（如 sm:visible 不生效），且 invisible 仅隐藏视觉但保留布局空间，不适合此场景。
- ✅ 若需“仅移动端显示、桌面隐藏”，则用 block sm:hidden。
- ? 始终检查断点语义：sm 是首个 向上生效 的断点，适合“小屏隐藏、大屏显示”的典型需求。
掌握移动优先逻辑与断点含义，就能精准控制各设备下的元素显隐，避免常见响应式陷阱。
立即学习“前端免费学习笔记（深入）”；
