应使用 max-w-[1200px] mx-auto 替代 container 实现固定像素居中容器，因其不受断点限制、可精准匹配设计稿宽度，且需确保父容器提供宽度上下文。
直接改 container 类的宽度不现实——它默认只在 sm（640px）及以上生效，小屏退化为 w-full，且断点值写死在 CSS 中，无法用响应式前缀覆盖；设计稿要的不是“响应式最大宽度”，而是“固定像素居中容器”，该换思路。
为什么 container 加了却和设计稿对不上
设计稿通常给一个具体像素值（比如 1200px 或 1440px），而 container 是一套断点驱动的响应式逻辑：sm 下是 640px，md 是 768px，lg 是 1024px，xl 是 1280px——它不保证和你手里的 Figma 画布宽度一致。更关键的是，这些值在构建时就编译进 CSS，运行时无法被 CSS 变量或媒体查询动态修改。
- 你在 HTML 里写
container，实际得到的是max-w-640 sm:max-w-768 md:max-w-1024 lg:max-w-1280 xl:max-w-1536 mx-auto的组合，不是“1200px” - 如果设计稿要求“所有屏幕都 1200px 居中”，
container在 xs/sm/md 下根本不会生效，只会撑满 - 即使你加了
xl:container，它也只在 ≥1280px 时启用 1280px，而不是你想要的 1200px
用 max-w-* + mx-auto 替代 container 更直接
Tailwind 的 max-w-* 工具类才是控制固定像素宽度的正解，搭配 mx-auto 就能实现和设计稿完全对齐的居中容器，且无断点干扰。
- 查设计稿宽度（如 1200px），换算成 rem：1200 ÷ 16 = 75rem → 写
max-w-[75rem] mx-auto - 更稳妥用已定义的尺寸：若
max-w-7xl是 80rem（1280px），不够准；max-w-6xl是 72rem（1152px），偏小；这时必须用方括号语法：max-w-[1200px] mx-auto - 确保 JIT 模式启用（
tailwind.config.js中content字段覆盖所有模板路径），否则max-w-[1200px]不会生成 CSS - 别混用：
container max-w-[1200px] mx-auto会导致双重max-width，最终容器比预期窄
父容器塌缩导致宽度失效的典型场景
写了 max-w-[1200px] mx-auto 却还是撑满全屏？大概率是父级没提供宽度上下文，浏览器计算出的 max-width 是 auto。
- 常见于
flex布局：外层div设了flex flex-col，但没加w-full或flex-1，子元素的max-w-[1200px]就失去参照 - 常见于
grid布局：父级grid-cols-1但没设w-full，同样导致塌缩 - 调试方法：打开 DevTools → Elements → Computed 面板，搜
max-width，看是否为1200px；如果是auto，说明父级没撑开 - 快速修复：在外层包一层 …
需要适配多套设计稿宽度怎么办
项目里有 PC 端 1440px、后台系统 1200px、营销页 1024px 多种需求？硬改每个地方的 max-w-[x] 易错且难维护。
- 在
tailwind.config.js的theme.extend.maxWidth里定义别名：container-pc: '1440px', container-admin: '1200px', container-landing: '1024px' - 然后直接用
max-w-container-pc mx-auto，语义清晰，复用方便 - 别试图改
container默认行为——它只响应断点，不响应自定义命名，改了配置会影响所有已有container元素 - 如果设计稿还带左右内边距（比如 1440px 容器配 48px 左右留白），别往
container上加px-12，统一用max-w-container-pc mx-auto px-12，避免 margin collapse 干扰
真正容易被忽略的不是怎么写类名，而是浏览器对 max-width 的计算依赖父级宽度上下文——哪怕你写了 max-w-[1200px]，只要上层是未设宽的 flex 或 grid，它就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
