max-w-*类仅设宽度上限而不主动撑满，需确保元素display为block/flex/grid且父容器有明确宽度上下文；响应式需显式加断点前缀；css变量控制宽度须用max-w-[var(--x)]语法并启用jit模式。
max-w-* 类只设上限，不自动撑开
加了 max-w-lg 却没变宽？不是类没生效，而是它只限制“最多能多宽”，不负责“主动占满”。如果父容器本身是 inline 或没设 w-full、flex-1，子元素就按内容宽度渲染，max-w- 完全没机会起作用。
- 确保元素 display 是
block、flex或grid；inline元素无视max-w- - 父容器需有明确宽度上下文：比如
flex布局中加flex-1，或显式写w-full -
max-w-prose依赖当前font-size计算，text-sm和text-xl下实际像素值不同，不是固定值
响应式前缀必须显式声明，不会继承
把容器包在 md:flex 里，子元素只写 max-w-lg，它依然在所有断点生效——Tailwind 不会自动把父级断点“透传”给子元素的宽度类。要让最大宽度随屏幕变化，得自己加前缀。
- 正确写法：
sm:max-w-md md:max-w-xl lg:max-w-7xl - 错误写法：
max-w-lg（全局生效）或指望父级lg:flex让它自动响应 -
max-w-screen-sm是视口基准（≈max-width: 640px），而max-w-md是固定尺寸（默认768px），二者来源不同，不能混用逻辑
用 CSS 变量控制宽度必须绕过 container 类
container 类在构建时就把各断点的像素值硬编码进 CSS，运行时改 --container-width 它完全感知不到。想用变量驱动宽度，得放弃 container，改用动态语法。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 可行写法：
max-w-[var(--container-width,1200px)] mx-auto（Chrome 119+ / Firefox 117+ / Safari 17.4+ 支持） - 响应式降级必须手动写断点：
sm:max-w-[var(--container-sm)] md:max-w-[var(--container-md)]，变量本身没有媒体查询能力 - 常见失效原因：父元素是
flex但没设flex-shrink: 0，导致容器被压缩；或变量名拼错（如--contianer-width），浏览器静默 fallback 到auto
自定义百分比宽度要用 w-[x%]，别靠分数类凑
需要左侧导航占 14%、主内容占 86%，w-1/7 和 w-6/7 算出来是 ≈14.2857% 和 ≈85.7143%，视觉上会有偏差。真要精确比例，直接用方括号语法。
- 写法：
w-[14%]、w-[86%]，支持所有单位：w-[20vw]、w-[calc(100%-2rem)] - 注意：这类任意值需启用 JIT 模式，且不能用于伪元素或某些受限上下文（如
content属性） - 百分比宽度依赖父容器有确定宽度；若父是
flex但未设flex-basis，w-[14%]可能算出 0
实际调试时，最常卡住的地方不是语法写错，而是 computed styles 里看到的 max-width 还是 var(--x) 字符串——说明浏览器没解析成功，得先查变量是否定义、是否拼写一致、是否在作用域内可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
