container 默认仅在 sm 及以上断点启用 max-width，无 margin 需配 mx-auto 才居中；它不控制 display、padding 或 flex 行为，小屏下等价 w-full，父为 flex/grid 且未设 flex-shrink:0 时会被压缩，mx-auto 需配合明确宽度类才生效。
直接加 container 类却没看到宽度限制？不是你写错了，而是它默认只在断点（如 sm 及以上）才设 max-width，且本身不带 margin，必须配 mx-auto 才能居中。
为什么 container 单独用不生效
它只是响应式 max-width 的集合，不控制 margin、padding 或 display 行为。常见失效现象包括：
- 小屏（
xs）下等价于w-full，撑满全宽，毫无约束 - 父容器是
flex或grid，又没设flex-shrink: 0，container被压缩成窄条 - 浏览器审查元素后发现计算出的
max-width是auto，说明父级塌缩或未提供宽度上下文 - 你期望它“永远居中”，但它默认只从
sm:640px开始启用断点逻辑
mx-auto 必须搭配明确宽度类才起作用
mx-auto 本质是 margin-left: auto; margin-right: auto，但块级元素默认占满父宽，所以没宽度类时它根本没“挤”的空间。正确组合方式：
-
max-w-7xl mx-auto：固定在 lg+ 下 1280px 居中，适合正文阅读区域 -
max-w-prose mx-auto：按字体大小自适应行宽，比像素值更语义化 -
sm:max-w-md md:max-w-lg lg:max-w-4xl mx-auto：手动控制各断点宽度，避免默认container的断点跳跃 - 别混用
container mx-auto max-w-4xl——双重max-width会叠加压缩，最终容器比预期窄
想让容器在所有屏幕都约束宽度，别依赖 container
它的设计目标是「断点对齐」，不是「全尺寸控制」。更直接、更可控的做法是绕过 container，用工具类显式声明：
立即学习“前端免费学习笔记（深入）”；
- 全屏统一最大宽度：
max-w-[1200px] mx-auto（注意方括号语法需启用 JIT） - 响应式降级：
max-w-screen-sm sm:max-w-screen-md lg:max-w-7xl mx-auto - 带内边距的通用写法：
max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 - 如果项目已配置
theme.container.center = true，那mx-auto就冗余了，但max-w-类仍要保留
真正容易被忽略的渲染层干扰
即使 class 写得完全正确，mx-auto 也可能视觉失效。这时候问题不在 Tailwind，而在布局上下文：
- 父容器有
overflow: hidden或transform，导致margin被裁切或偏移 - 用了
position: sticky或backdrop-filter，触发新层叠上下文，影响居中参照系 - 子元素是
inline-block或设置了float，脱离正常流，mx-auto彻底无效 - Flex 父容器里还硬套
mx-auto，不如直接改用justify-center
