如何在 Tailwind CSS 中仅在屏幕尺寸为 sm 或更小时显示元素

本文详解如何使用 Tailwind CSS 的响应式工具类（如 sm:hidden）精准控制元素的显示与隐藏，实现「仅在 ≤sm 屏幕下可见」的布局需求，并纠正常见误区（如误用 min-sm:hidden）。

本文详解如何使用 tailwind css 的响应式工具类（如 `sm:hidden`）精准控制元素的显示与隐藏，实现「仅在 ≤sm 屏幕下可见」的布局需求，并纠正常见误区（如误用 `min-sm:hidden`）。

在 Tailwind CSS 中，响应式类名遵循移动优先（mobile-first）设计原则：未加前缀的类作用于所有断点（包括 xs），而带断点前缀（如 sm:）的类仅在该断点及更大屏幕生效。因此，要让一个元素「仅在 sm 或更小屏幕下显示」，核心逻辑是：

✅ 默认显示（即不加任何隐藏类）
❌ 在 sm 及以上屏幕主动隐藏 → 使用 sm:hidden

这是一个常被误解的要点：很多人尝试使用 min-sm:hidden（Tailwind 并不存在该类），或错误地写成 hidden sm:inline（这会使元素在 sm+ 显示、xs 隐藏，效果相反）。正确做法是反向思维——让元素“默认可见”，再对更大的断点施加隐藏。

✅ 正确写法示例

{/* 该 div 仅在 xs 和 sm 屏幕下可见；在 md 及以上自动隐藏 */}
<motion.div className="sm:hidden fixed top-0 left-0 w-screen h-screen bg-primary-bg overflow-auto">
  <button 
    className="absolute top-0 left-0 p-5 cursor-pointer" 
    onClick={onClose}
  >
    <ArrowLeftIcon className="h-8 w-8" />
  </button>
  <div className="p-5 mt-12">
    <h2 className="text-2xl uppercase font-source-sans-pro font-bold">
      {essay.title}
    </h2>
    <p className="text-md font-source-serif-pro">{essay.author}</p>
    <p 
      className="mt-4 text-sm sm:text-lg font-source-serif-pro cursor-text"
      dangerouslySetInnerHTML={{ 
        __html: essay.content.replace(/\n/g, '<br/>') 
      }}
    />
  </div>
</motion.div>

⚠️ 注意事项与常见错误

• sm:hidden ≠ hidden sm:block
  sm:hidden 表示「当屏幕 ≥ sm（640px）时应用 display: none」，而 hidden sm:block 是先全局隐藏、再在 sm+ 恢复显示——这恰恰实现了「仅在 sm+ 显示」，与需求相反。

  

  HaloTool

  AI工具在线集合网站

  下载

• 不要使用不存在的类名
  Tailwind 官方不提供 min-sm:、max-md: 等前缀（除非你手动配置了插件）。坚持使用标准断点前缀：sm:、md:、lg:、xl:。

• 叠加多个断点需谨慎
  若需「仅在 xs 显示，sm 及以上都隐藏」，直接 sm:hidden 即可（因 xs 是默认断点，无需额外声明）；若还需在 md 下显示，则应使用 sm:hidden md:block。

• 配合 motion.div 时注意 SSR 兼容性
  若项目使用服务端渲染（如 Next.js），确保 motion.div 的类名在服务端与客户端一致，避免水合警告。推荐将响应式逻辑完全交由 Tailwind 处理，而非在 animate 或 initial 中动态切换类名。

✅ 对比验证：两个区域的响应式分工

这种分工清晰、语义明确，也便于后续维护和团队协作。

立即学习“前端免费学习笔记（深入）”；

掌握这一模式后，你可轻松扩展至其他断点：例如 md:hidden（仅在 sm 及以下显示）、lg:hidden（仅在 md 及以下显示），真正实现精细化响应式控制。