响应式布局失效的三大主因是：未显式声明grid/flex基础类、hidden类覆盖断点逻辑、断点值以配置文件为准。必须写grid才能启用grid-cols-*，hidden会强制覆盖后续display声明，断点阈值由tailwind.config.js的theme.screens决定。
grid 类没加，flex 类漏写，断点链断开——这三件事会让响应式布局当场失效，而不是“看起来有点不对”。
为什么 grid-cols-2 在手机上还是单列？
根本不是类没生效，而是容器压根没变成网格。Tailwind 不会自动补 display: grid，只写 grid-cols-2 等同于什么都没做。
- 必须显式写
grid（对应display: grid），否则所有grid-cols-*、gap-、col-span-都不触发 - 错误写法：
grid-cols-1 sm:grid-cols-2 md:grid-cols-3→ 小屏下仍是 block 布局，子项垂直堆叠 - 正确写法：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 - 用浏览器 DevTools 的 Layout 面板确认 computed 中是否真有
display: grid和grid-template-columns
sm:block lg:hidden 为什么有时不管用？
hidden 是个“暴力指令”，它没有媒体查询隔离，一旦出现就会锁死后续所有 display 声明。
- 错误写法：
hidden sm:block lg:hidden→lg:hidden在 ≥1024px 下强制隐藏，sm:block被覆盖 - 正确思路：默认可见，只在需要时隐藏 ——
block sm:hidden表示“≥640px 隐藏”，hidden md:block表示“默认隐藏，≥768px 显示” - 想“仅在桌面显示”，用
hidden md:block，别写md:block lg:block xl:block（冗余且难排查） - SSR 场景下，服务端直出
hidden再 JS 加sm:block可能导致内容闪动，关键元素建议服务端预判视口后直出对应断点类
断点值到底以谁为准？
硬背 “sm 是 640px” 没用。你项目里 tailwind.config.js 中的 theme.screens 才是唯一真相。
- 默认值只是参考：
{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' } - 如果团队把
md改成'md': '800px'，那所有md:类都从 800px 开始生效 - 新增断点如
desktop: '1440px'必须带单位、key 名合法（不能含空格或特殊字符），否则desktop:grid-cols-4完全不生成 CSS - 删掉某个断点（比如移除
xl），所有xl:类将彻底消失，不会 fallback，也不会报错
Flex/Grid 响应式组合最容易踩的坑
以为写了 sm:flex 就能替代 flex，其实小屏下 Flexbox 根本不启用。
- 移动端竖排、桌面横排：必须写
flex flex-col sm:flex-row（先启用 flex，再设方向） - 卡片网格列数渐进：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4，漏掉任一断点，中间区间就会回退到 block 渲染 - 按钮组响应式：小屏全宽堆叠，大屏水平排列 ——
flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0 - 自定义 5 列或混合轨道（如
240px 1fr auto）必须在tailwind.config.js的theme.extend.gridTemplateColumns中声明，且键名不支持响应式前缀（sm:5无效）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
