17370845950

使用 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 区域，仅在平板及以上设备显示：

  
    
      
        

          

            
            
Customizing your tailwind.config.js file
          
          
        
      
    
  

⚠️ 注意事项

• ❌ 避免混用 visible / invisible：它们不具有响应式变体（如 sm:visible 不生效），且 invisible 仅隐藏视觉但保留布局空间，不适合此场景。
• ✅ 若需“仅移动端显示、桌面隐藏”，则用 block sm:hidden。
• ? 始终检查断点语义：sm 是首个 向上生效 的断点，适合“小屏隐藏、大屏显示”的典型需求。

掌握移动优先逻辑与断点含义，就能精准控制各设备下的元素显隐，避免常见响应式陷阱。