sm:、md:、lg: 是视口宽度最小阈值，生效宽度由 tailwind.config.js 的 theme.screens 决定，默认为 sm:≥640px、md:≥768px、lg:≥1024px；hidden 会覆盖断点显示类，应避免混用；断点类可共存，后置类同名属性优先。
sm:、md:、lg: 这些前缀到底在什么宽度下生效
它们不是“设备类型”，而是视口宽度（viewport width）的最小阈值。默认值是：sm: ≥640px，md: ≥768px，lg: ≥1024px——但这些值完全由你项目里的 tailwind.config.js 中的 theme.screens 决定。
常见翻车点：
- 硬背 768px 却没检查配置，结果
md:flex在 800px 才触发（因为配置里写的是md: '800px'） - 单位漏写，比如
md: 768（缺'768px'），JIT 编译器直接跳过该断点，类名不生成 CSS - 自定义断点顺序错乱，例如
{ sm: '640px', tablet: '900px', md: '768px' }，会导致 768–900px 区间无匹配断点，样式“消失”
hidden 与断点混用为什么经常失效
hidden 等价于 display: none，它不是响应式类，而是一个全局强制隐藏指令。一旦出现在 class 列表中，且位置靠后，就会压制后续所有 md:block、lg:block 的显示声明。
错误写法示例：hidden md:block lg:hidden
立即学习“前端免费学习笔记（深入）”；
问题在于：Tailwind 按 HTML 中 class 出现顺序编译 CSS，hidden 声明靠后 → 权重更高 → 在 lg 尺寸下仍为 display: none。
正确做法是彻底放弃 hidden，只用断点控制显隐逻辑：
- 想「只在中屏显示」→
sm:hidden md:block lg:hidden - 想「小屏隐藏、大屏显示」→
sm:hidden lg:block（注意：768–1023px 区间会继承sm:hidden，所以md:block必须显式补上） - 服务端渲染（SSR）场景下若需初始隐藏，应确保 HTML 中不带任何断点类，等 JS 加载后再动态添加，否则可能闪动
sm: 和 lg: 类能同时生效吗？怎么控制覆盖关系
能，而且很常见。它们不互斥，只要视口满足条件就都生效；同名属性以靠后的类为准。
比如：sm:w-1/2 lg:w-1/3，在 1200px 视口下，两个类都加载，但 lg:w-1/3 覆盖了宽度设置。
关键理解点：
-
sm:不是“仅在小屏”，而是“≥640px 起一直有效”，直到被更大断点同名属性覆盖 - 没声明
md:，不等于“继承sm:”，而是“继续沿用sm:的值”——前提是该属性没被更早的无前缀类覆盖 - 想让某样式「只在 sm 到 lg 之间生效」，得组合：
sm:block lg:hidden（先 sm 显示，再 lg 隐藏），不能依赖“自动截断”
grid-cols-* 和 flex-direction 类怎么配合断点做布局切换
这是响应式中最高频也最易出错的组合。核心原则：从移动优先出发，用断点逐级覆盖布局结构。
典型安全写法：
- 卡片栅格：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4（手机单列 → 小屏双列 → 中屏三列 → 大屏四列） - Flex 排列方向：
flex flex-col sm:flex-row lg:flex-col（竖排 → 小屏横排 → 大屏切回竖排） - 字体+间距递进：
text-base sm:text-lg lg:text-xl p-4 sm:p-6 lg:p-8，避免跳跃感
容易踩的坑：
- 写成
sm:hidden lg:block期望“只在大屏显示”，结果 md 尺寸（768–1023px）完全空白——必须补md:block或改用sm:block lg:hidden - 在 SSR 或低配设备上，JS 未执行时，纯 HTML 渲染依赖 class 是否直出，建议关键布局类由服务端判断视口后直接注入，而非 JS 动态加
真正复杂的地方不在语法，而在于你是否查过自己项目的 tailwind.config.js —— 所有断点行为都从那里开始，不是文档，也不是经验。
