本文详解如何使用 Tailwind CSS 的响应式工具类精准控制元素的显示与隐藏，重点实现「仅在 sm 及以下断点可见」的效果，并纠正常见误用（如 min-sm:hidden 无效写法），附正确代码示例与实用注意事项。
本文详解如何使用 tailwind css 的响应式工具类精准控制元素的显示与隐藏，重点实现「仅在 `sm` 及以下断点可见」的效果，并纠正常见误用（如 `min-sm:hidden` 无效写法），附正确代码示例与实用注意事项。
在 Tailwind CSS 中，响应式显示控制依赖于移动优先（mobile-first）的设计理念：所有未加前缀的样式默认作用于 sm（最小断点，即 640px）及以下屏幕；而带断点前缀（如 sm:、md:）的工具类，则仅在对应断点及以上生效。
因此，若希望某个元素「仅在 sm 或更小屏幕显示，而在 sm 以上隐藏」，正确做法是：
✅ 默认显示（不加任何隐藏类） + 在 sm 断点显式隐藏 → 使用 sm:hidden。
❌ 错误写法包括：
- min-sm:hidden（Tailwind 不支持 min- 前缀，该类不存在）；
- hidden sm:inline（逻辑反向：这会使元素默认隐藏、仅在 sm+ 显示，与需求相反）；
- xs:block sm:hidden（xs 并非 Tailwind 默认断点，标准断点为 sm/md/lg/xl/2xl）。
以下是修正后的完整示例（已适配你的 JSX 结构，保留 motion.div 和动态内容）：
<>
{/* 第一个 div：默认隐藏，仅在 sm 及以上显示 → 使用 hidden + sm:inline */}
<motion.div
className="hidden sm:inline cursor-default w-8/12 bg-primary-bg overflow-auto h-3/4 rounded-2xl relative pt-5 items-center"
>
<button className="absolute top-0 right-10 m-5 p-2 cursor-pointer" onClick={onClose}>
<XMarkIcon className="h-10 w-10 text-primary-green" />
</button>
<div className="p-10">
<h2 className="text-lg sm:text-2xl pt-2 font-bold font-source-sans-pro uppercase cursor-text">
{essay.title}
</h2>
<p className="pb-2 font-source-sans-pro capitalize cursor-text">{essay.author}</p>
<p
className="text-sm sm:text-lg font-source-serif-pro cursor-text"
dangerouslySetInnerHTML={{ __html: essay.content.replace(/\n/g, '<br/>') }}
/>
</div>
</motion.div>
{/* 第二个 div：仅在 sm 及以下显示 → 默认可见 + sm:hidden */}
<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>
</>? 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
- Tailwind 的断点类（如 sm:hidden）始终表示「在 sm 及以上断点应用该样式」；
- sm:hidden = 屏幕 ≥ 640px 时 display: none，而
- 若需更精细控制（如仅在 xs 到 sm 区间显示），需自定义断点或结合 max-w-sm 等辅助类，但标准方案中 sm:hidden 已完全满足「sm 及以下显示」需求；
- 务必确认项目中已启用 sm 断点（默认开启，无需额外配置）。
通过这种清晰、符合框架设计哲学的方式，可确保响应式行为稳定可靠，避免因误解断点机制导致的显示异常。
