container小屏无缩进是因为默认仅sm+设max-width，小屏退化为w-full且依赖父容器有明确宽度上下文；需用max-w-4xl mx-auto或配置container-fixed。
移动端跨端流式布局不是靠“加一堆响应式类”堆出来的，而是靠明确主轴方向、控制内容收缩边界、切断父容器干扰这三件事决定成败。
为什么 container 在小屏下没缩进效果
container 默认只在 sm（640px）及以上才设 max-width，小屏下退化为 mx-auto w-full，内容必然贴边。更关键的是它依赖父容器有明确宽度上下文——如果父级是 flex、grid 或 absolute 定位但没设 width: 100%，container 就直接失效。
- 调试时直接看浏览器 Computed 面板里
max-width是否被计算为auto或远小于预期 - 稳妥做法是绕过
container，改用max-w-4xl mx-auto - 若真需所有尺寸都约束宽度，别硬改
container，在tailwind.config.js里加theme.extend.maxWidth["container-fixed"]: "896px"，再用max-w-container-fixed
grid-cols-* 写了却不换行？缺 display: grid
grid-cols-2 这类工具类只生成 grid-template-columns，不自动加 display: grid。单独写完全无效。
- 正确写法：
class="grid grid-cols-2 gap-4"，缺grid就白写 - 响应式列数要写全：
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3，不能只写lg:grid-cols-3——中屏会继承单列，不会自动变成两列 - 子元素有
min-width（如图片）时，固定列数易撑破网格，改用grid-cols-[repeat(auto-fit,minmax(200px,1fr))]
flex 布局错位或间距失控的根源
flex 默认 flex-row 且 flex-wrap: nowrap，子元素超宽直接溢出；justify-between 和 justify-around 对子元素数量敏感，2个元素时表现正常，3个以上间隙就不均。
- 需要换行必须显式加
flex-wrap，否则只是横向拉伸容器 - 控制子项间距优先用
gap-4，别用mr-4之类手动调每个子项——后者易引发外边距合并（margin collapse），尤其与相邻元素的mb-4叠加时 - 垂直居中要同时写
items-center（交叉轴）和h-full或min-h-screen（确保父容器有高度）
响应式类名突然失效或行为反直觉
Tailwind 断点不是覆盖逻辑，而是媒体查询封装：md:text-center 只在 ≥768px 生效，更小屏幕仍用基础类（无断点前缀）；md:hidden 意思是“中屏及以上隐藏”，小屏反而显示——这点常被当成“移动端隐藏”误用。
- 想实现“小屏左对齐、中屏居中、大屏右对齐”，必须写全：
text-left md:text-center lg:text-right - 移动端切换布局时，别只靠
md:flex-row，还要重置order和宽度行为，比如小屏下侧栏加w-full，移除order类避免继承 - 测试时打开 DevTools 切换设备尺寸，重点看焦点顺序和屏幕阅读器朗读顺序是否匹配视觉
真正卡住人的地方，从来不是“该用哪个类”，而是父容器有没有显式声明布局上下文、子元素有没有守住最小尺寸边界、以及断点规则有没有被完整覆盖——这些细节在 DevTools 里一眼就能验，但很容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
