sm: 表示视口宽度 ≥ 640px 时生效，lg: 表示视口宽度 ≥ 1024px 时生效，二者不互斥且 lg 优先级更高。
直接用 sm: 和 lg: 前缀就能控制元素在小屏（≥640px）和大屏（≥1024px）下的表现，但必须理解它们是「最小宽度」断点，不是「仅在此区间」——写错顺序或混用 hidden 极易导致元素始终不显示。
sm: 和 lg: 的实际触发条件是什么
sm: 表示「视口宽度 ≥ 640px 时生效」，lg: 表示「视口宽度 ≥ 1024px 时生效」。两者不互斥：在 1200px 宽度下，sm:text-lg 和 lg:text-xl 都会起作用，后者优先级更高（因类名靠后且更具体）。
- 默认（无前缀）类在所有尺寸生效，包括 sm: 不是“只在手机横屏”，而是“从手机横屏开始一直有效”
-
lg:不覆盖sm:的设置，只是追加或覆盖同名属性（如sm:w-1/2 lg:w-1/3） - 如果想让某个样式「只在 sm 到 lg 之间生效」，得组合逻辑：
hidden sm:block lg:hidden—— 先默认隐藏，sm 起显示，lg 起再隐藏
常见错误：hidden 与断点混用导致失效
hidden md:block lg:hidden 这种写法在 lg 尺寸下依然隐藏，因为 hidden 等价于 display: none，而 Tailwind 类的加载顺序会让它持续压制后续的 lg:block。浏览器解析时，hidden 的声明位置靠前、权重不低，且没有媒体查询隔离。
- 正确做法是放弃
hidden，全用断点控制：sm:block lg:hidden（小屏起显示，大屏起隐藏） - 若需默认隐藏，写成
hidden sm:block lg:hidden是错的；应写为sm:block lg:hidden，并确保该元素在 - SSR 场景下，初始 HTML 中元素存在但被
hidden，JS 加载后才补断点类，可能造成闪动 —— 关键内容建议服务端判断视口后直出对应类
sm 与 lg 在布局类中的典型搭配
响应式栅格、Flex 方向、间距等最常依赖这两个断点。它们覆盖了主流移动设备横屏到桌面中屏的关键分界，无需过度细化。
立即学习“前端免费学习笔记（深入）”；
- 列数控制：
grid-cols-1 sm:grid-cols-2 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期望「只在大屏显示」，这会在 768–1023px（md 尺寸）产生真空 —— 必须补上md:block或改用hidden sm:block lg:hidden
真正容易被忽略的是断点值本身：你项目里 tailwind.config.js 中的 theme.screens 可能已修改过，sm 不一定等于 640px —— 检查配置比背默认值更重要。
