container加了没反应是因为默认仅在sm（640px）及以上断点生效，xs下等价于mx-auto w-full无最大宽度限制；需检查父元素是否提供明确宽度上下文，或改用max-w-4xl mx-auto实现全尺寸约束。
container为什么加了没反应
不是你漏写了类名，而是 Tailwind 的 container 默认只在 sm（640px）及以上断点生效。小屏（xs）下它等价于 mx-auto w-full，没有最大宽度限制——所以看起来“没约束”。
- 检查浏览器 DevTools 的 Computed Styles，看
container元素的max-width是否为auto或远小于预期值 - 若需所有尺寸都限制宽度，别改
container行为，直接用max-w-4xl mx-auto更可靠 -
container依赖父元素有明确宽度上下文：如果父级是flex、grid或absolute定位且未设w-full或min-w-0，它会退化为w-full
为什么container撑满全屏或偏移
根本原因是父容器没提供可测量的宽度基准，导致 container 的 max-w- 断点逻辑失效，回退到无约束状态。
- 常见场景：在
<header class="flex-1"></header>里直接放<div class="container">，但 <code>flex-1没配min-w-0，父级宽度计算异常 - 调试方法：给
container加个临时bg-red-200，再审查其 computedwidth和max-width，对比父级的width - 稳妥解法：在外层包一层
<div class="w-full"><div class="container">...</div></div>，或确保直系父元素有w-full/flex-1 min-w-0 - 比如同时写
container sm:max-w-lg：前者在sm下用max-w-640，后者强制覆盖为max-w-lg（512px），结果反而更窄 -
max-w-screen-md和max-w-md数值不同，前者按视口断点算（如 md=768px），后者是固定尺寸（max-w-md=32rem=512px），不能混着当同一套体系用 - 想全局统一固定宽度容器？别硬 patch
container，在tailwind.config.js的theme.extend.maxWidth里加个container-fixed: '896px'，然后用max-w-container-fixed mx-auto - 典型现象：
<header class="mb-6"></header>+<div class="container pt-6"> → 两者之间只有 6px 空白，而非 12px <li>解法不是调大数值，而是统一用 <code>padding控制容器内部留白，外部间距交给space-y-6或相邻元素的mb-6单侧控制 - 更干净的做法：把
container当纯宽度约束器，留白由子元素承担，例如<div class="container"><div class="p-6">内容</div></div>
容器宽度异常多数不是配置错，而是对
container和max-w-*混用时的坑
container 本质是带断点的 max-w- + mx-auto 组合，和手动写的 max-w- 类不兼容叠加，容易互相覆盖或产生意外交互。
padding和margin合并导致留白不对
给 container 直接加 py-8 或 px-4 很容易被忽略外边距合并（margin collapse）问题，实际留白远少于预期。
立即学习“前端免费学习笔记（深入）”；
container 的响应式前提和父级宽度依赖理解偏差；真正要盯住的，是 computed styles 里的 max-width 值和它上面每一层的 width 计算链。
