container 默认仅从 sm（640px）起生效，小屏下等价于 mx-auto w-full；若父元素无明确宽度（如 flex/grid 未设 width:100%），container 会退化为撑满全屏；需检查 computed styles 中 max-width 是否被压缩，或改用 max-w-* mx-auto 更直接。
container 类默认不生效？检查是否漏了 max-width 断点
直接加 container 没反应，不是你写错了，而是 Tailwind 默认只在特定视口宽度下才给 container 设 max-width。它不会让内容“永远居中缩进”，而是在 sm（640px）及以上才启用约束逻辑。
- 小屏（
xs）下container实际等价于mx-auto w-full，没宽度限制 - 真正生效的断点从
sm开始：max-w-640→md是max-w-768→ 依此类推 - 如果想让
container在所有尺寸都限制宽度，得自己覆盖配置或手动加max-w-4xl mx-auto
为什么加了 container 还是撑满全屏？可能是父元素没设 width:100%
Tailwind 的 container 依赖父容器能“撑开”再居中。如果它上面某层是 flex、grid 或 absolute 定位，又没显式设宽，container 就可能退化为 w-full 行为。
- 常见场景：在
header或main标签里直接放container，但该标签没设width:100%（比如用了flex-1却没配min-w-0） - 调试方法：浏览器审查元素，看
container计算后的max-width是否被父级压缩为auto - 稳妥做法：在
container外包一层div并加w-full，或确保其直系父元素有明确宽度上下文
需要固定宽度而非响应式？别硬改 container，用 max-w-* 更直接
container 的本质是一组带断点的 max-w-* + mx-auto 组合。如果你只要一个固定最大宽度（比如始终 max-w-4xl），没必要绕路用 container 再去禁用断点。
-
container在sm下是max-w-640，但max-w-4xl是56rem（896px），二者数值不同 - 直接写
max-w-4xl mx-auto更轻量，也避免断点逻辑干扰 - 若项目中大量需要非响应式容器，建议在
tailwind.config.js的theme.extend.maxWidth里加个container-fixed: '896px'，然后用max-w-container-fixed
和 padding 配合时容易忽略 margin-collapse 导致留白异常
很多人习惯给 container 加 py-8 或 px-4，但若上下相邻元素也有 margin-bottom / margin-top，就会触发外边距合并（margin collapse），实际留白比预期少。
- 典型现象：顶部
header下设mb-6，container上设pt-6，结果两者之间空白只有 6px 而非 12px - 解法不是盲目加大数值，而是统一用 padding 控制容器内留白，外部用
space-y-*或divide-y管理组件间距 - 更稳妥的是把
container当纯宽度约束器，留白交给子元素（如div包裹内容并设p-6）
最常被忽略的是：container 的断点行为和父容器宽度上下文是耦合的，不是独立组件。调样式前先看 computed styles 里的 max-width 和 width 值，比猜更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
