container类在小屏下无效是因为其默认仅从sm（640px）起设max-width，xs下等价w-full；mx-auto需配合明确宽度才生效，单独使用对块级元素无效。
container 类为什么在小屏下没效果
因为 container 默认只从 sm（640px）断点开始设 max-width，xs 尺寸下它等价于 w-full，既不限宽也不居中。你看到内容撑满全屏，不是写错了，是它本就不该在手机上约束宽度。
常见误判场景：
- 在手机模拟器里检查元素，发现
computed max-width是none或auto - 父容器用了
flex或grid，但没加flex-shrink-0，导致container被压缩成一条细线 - 直接把
container塞进<header class="absolute"></header>这类脱离文档流的父级里，失去宽度上下文
mx-auto 单独用为什么不起作用
mx-auto 本质只是 margin-left: auto; margin-right: auto，但它对块级元素无效——因为块级元素默认占满父宽，没有“可居中的空间”。它必须搭配明确的宽度控制才生效。
正确组合方式：
立即学习“前端免费学习笔记（深入）”；
-
max-w-7xl mx-auto：固定最大宽度 + 居中，适合正文阅读区 -
sm:max-w-md md:max-w-lg lg:max-w-4xl mx-auto：手动控制各断点宽度，避免container的断点跳跃 -
max-w-prose mx-auto：按字体行高自适应，比像素值更语义化
错误示范：mx-auto 单独写在 <div> 上，或套在未设 <code>width 的 flex 子项里。
如何让容器在所有屏幕尺寸都约束宽度
别依赖 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
注意：max-w-screen-* 是相对于视口宽度的，不适合需要精确像素控制的场景；而 max-w-* 系列是固定值，更稳定。
自定义 container 最大宽度的配置陷阱
想改 container 在 lg 断点下的默认宽度？必须在 tailwind.config.js 的 theme.container.maxWidth 下配置，且要理解层级：
-
default键控制未指定断点时的行为（如只写container，不带前缀） - 直接赋值会覆盖全部断点，应使用
extend追加新值，而非重写整个对象 - JIT 模式下，若
content路径没包含模板文件，自定义类可能根本不会生成
最常被忽略的一点：即使配置了 theme.container.center = true，mx-auto 仍不冗余——它负责居中逻辑，而 max-w-* 类仍需保留来提供宽度依据。
