根本原因是没加grid基础类，tailwind不会自动补display: grid；只写grid-cols-*无效，必须显式添加grid类，且断点需连续覆盖、避免hidden混用，生效宽度以tailwind.config.js中theme.screens为准。
Tailwind 的响应式布局不是靠猜断点或写 media query，而是靠明确的移动优先规则 + 类名顺序覆盖机制。只要基础类写对、断点连续、避开 hidden 混用，90% 的响应式需求一行 class 就能搞定。
为什么 grid-cols-* 在手机上还是单列？
根本原因：没加 grid 基础类。Tailwind 不会自动补 display: grid，只写 grid-cols-2 等同于什么都没写——容器仍是 block，子元素垂直堆叠。
- 错例：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3→ 小屏下无grid，列数失效 - 正例：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 验证方法：打开 DevTools Layout 面板，确认 computed 中真有
display: grid和grid-template-columns - 漏断点会“掉档”：只写
md:grid-cols-3，640–767px 区间无声明，默认回退到单列
sm:block 和 lg:hidden 一起用为啥不生效？
因为 hidden 是全局强制指令，不是响应式类。它没有媒体查询包裹，一旦出现在 class 列表里，就会压制后续所有 sm:block、lg:block 的 display 声明。
- 错误写法：
hidden sm:block lg:hidden→ lg 下仍为display: none - 正确逻辑：默认可见，只在需要时隐藏。例如「仅中屏显示」→
sm:block md:hidden lg:block - 更常用模式：「小屏显示，大屏隐藏」→
block sm:hidden lg:hidden（注意：中间断点如md:hidden必须显式补上，否则 768–1023px 会继承sm:hidden） - SSR 场景慎用：服务端直出
hidden，JS 加载后才加断点类，可能造成内容闪动
sm:、md:、lg: 到底从多少像素开始生效？
它们不是固定值，完全取决于你项目里的 tailwind.config.js 中 theme.screens 的配置。硬背 640/768/1024 没用，改过配置就全错。
- 默认值只是参考：
{ sm: '640px', md: '768px', lg: '1024px' } - 常见翻车点：
md: '800px'却按 768px 写逻辑，结果md:flex在 780px 还不触发 - 单位必须写全：
md:768❌（JIT 编译器直接跳过），md:768px✅ - 断点顺序不能乱：如果定义了
{ sm: '640px', tablet: '900px', md: '768px' }，768–899px 区间无匹配断点，样式“消失”
最易被忽略的是：断点类之间没有继承关系，sm: 不是“仅在小屏”，而是“≥640px 起一直有效”，直到被更大断点同名属性覆盖；而漏掉某个断点，那段视口宽度就完全失去控制——不是回退到上一个，而是回归浏览器默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
