Tailwind 的 container 类不响应 CSS 变量，因其静态生成、构建时硬编码像素值；需改用 max-w-[var(--container-width)] + mx-auto，并手动配合断点与变量定义实现响应式。
container 类不响应 CSS 变量，这是设计使然
直接给 container 类绑定 CSS 变量（比如 max-width: var(--container-width)）不会生效——Tailwind 的 container 是静态生成的工具类，它在构建时就把断点对应的像素值硬编码进 CSS 了，完全不读取运行时变量。你改 --container-width，它根本不知道。
想用 CSS 变量控制宽度，得绕过 container
真正可行的方式是放弃 container，改用 max-w- 系列 + 自定义 CSS 变量组合：
- 在
tailwind.config.js的theme.extend.spacing或theme.extend.screens中注入变量（需启用 JIT 模式） - 更直接的做法：用方括号语法写动态值，比如
max-w-[var(--container-width)]，但注意这要求浏览器支持max-width接收 CSS 变量（Chrome 119+、Firefox 117+、Safari 17.4+） - 配合
mx-auto居中，且确保父容器有明确宽度上下文（比如flex-1或w-full）
示例：<div class="max-w-[var(--container-width,1200px)] mx-auto">...
<h3>响应式降级必须手动写断点，不能靠变量自动推导</h3>
<p>CSS 变量本身没有媒体查询能力，<code>var(--container-width) 在所有断点下都返回同一个值。要实现“小屏窄、大屏宽”，必须显式写：
立即学习“前端免费学习笔记（深入）”；
max-w-[var(--container-xs)] sm:max-w-[var(--container-sm)] lg:max-w-[var(--container-lg)] mx-auto- 对应在 :root 或组件级 CSS 中定义：
:root { --container-xs: 320px; --container-sm: 640px; --container-lg: 1200px; } - 注意：Tailwind 不会帮你把
sm:前缀映射到@media (min-width: 768px)并切换变量值——那是纯 CSS 的事，变量值始终由当前作用域决定
容易被忽略的渲染层干扰
即使变量值正确、类名写对，max-w-[var(--x)] 仍可能不生效：
- 父元素是
flex且没设flex-shrink: 0，容器会被压缩，max-w失去约束力 - 用了
transform或backdrop-filter，触发新层叠上下文，mx-auto的居中参照系偏移 - 变量未定义或拼写错误（比如
--contianer-width），浏览器静默 fallback 到auto，结果等价于无限制
查问题优先看 computed styles 里 max-width 是否解析为具体像素值，而不是 var(--x) 字符串本身。
