container类默认不生效主因是父容器缺宽度上下文或未配mx-auto；它仅响应式设max-width、无margin，需组合mx-auto居中，且在flex/grid父容器中易被压缩。
container 类默认不生效的常见原因
直接加 container 类却没看到居中或宽度限制？大概率是因为父容器没给 width 或 max-width，或者你忘了它本身不带 margin。Tailwind 的 container 是一个「响应式最大宽度 + 水平自动外边距」的组合类，但它只在有明确宽度上下文时才起作用——比如父元素是 block 且未被 flex/grid 等布局重置过。
-
container默认只在断点处设置max-width（如sm:max-w-screen-sm），不设固定值，所以若当前视口小于最小断点（sm:640px），它可能表现为max-width: 100% - 它不包含
margin，必须显式加mx-auto才能居中；单独用container只控制宽度，不居中 - 若父元素是
flex容器且子项未设flex-shrink: 0，container可能被压缩，此时需加flex-shrink-0
如何让 container 真正“撑满又居中”
最稳妥写法是组合使用：container mx-auto，但要注意它依赖父容器的流式行为。如果父级是 flex flex-col 或 grid，建议把 container mx-auto 放在独立的 <div> 中，避免布局干扰。
- 基础用法：
<div class="container mx-auto">...</div>—— 在body直接子级下效果最稳定 - 若需自定义最大宽度（比如全站统一为
1200px），别改container，而是用max-w-[1200px] mx-auto，更可控 - 想在小屏也强制居中（而非默认的
100%宽度），加max-w-full sm:max-w-screen-sm md:max-w-screen-md这类手动断点
mx-auto 单独用时的边界情况
mx-auto 本身只是 margin-left: auto; margin-right: auto，它能否居中，完全取决于元素是否具有「可计算的宽度」。块级元素默认占满父宽，所以 mx-auto 对它无效；只有当元素有 width、max-width、inline-block 或 flex 行为时，才会真正居中。
- 错误示范：
<div class="mx-auto">文本</div>→ 不居中（块级 + 无宽度约束） - 正确组合：
<div class="mx-auto max-w-4xl">文本</div>或<div class="mx-auto inline-block">文本</div> - 在
flex容器里，mx-auto对子项有效，但会抢占剩余空间，慎用于多子项场景
定制 container 的两种轻量方式
不推荐直接修改 tailwind.config.js 的 theme.container，除非全站严格统一。日常开发中更推荐按需覆盖：
立即学习“前端免费学习笔记（深入）”；
- 用
max-w-系列配合mx-auto：比如max-w-6xl mx-auto（对应72rem / 1152px），语义清晰、调试方便 - 用
@layer components封装复用类：@layer components { .page-container { @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8; } }，然后在 HTML 中写class="page-container"
真正容易被忽略的是：container 的断点值来自 theme.screens，如果你删了 sm 断点，container 在小屏就会退化为 max-w-none —— 这种隐式依赖，比样式本身更难排查。
