max-w-{size}仅限制宽度上限，不自动撑开、不替代w-full，且对inline元素无效；需确保display为block/flex、父容器有明确宽度，并正确使用响应式前缀和自定义配置。
直接用 max-w-{size} 就能控制最大宽度，但多数人卡在“为什么加了没反应”或“为什么响应式不生效”——核心其实是它只限制上限，不自动撑开、不替代 w-full，也不管父容器有没有宽度约束。
max-w-* 类不生效的常见原因
最常踩的坑是误以为 max-w-md 会让元素“变成中等宽度”，其实它只是说“最多不能超过那个值”，如果父容器本身很窄，或者元素是 inline 元素（比如 <span></span>），它根本不会体现效果。
-
max-w-类对display: inline元素无效，必须确保元素是block或flex等可设宽的 display 类型 - 父容器没有明确宽度（比如没设
w-full或没脱离文档流），子元素即使有max-w-2xl也可能被压缩到内容宽度 - 用了
max-w-prose却发现宽度没变——它依赖当前font-size计算，text-sm和text-xl下的宽度不同，不是固定像素值
max-w-screen-* 和 max-w-* 的关键区别
max-w-screen-sm 这类是“以视口宽度为基准的最大宽度”，而 max-w-md 是 Tailwind 内置的固定断点比例（如 md 默认是 768px）。前者直接映射 theme.screens，后者映射 theme.maxWidth。
-
max-w-screen-lg≈max-width: 1024px（取决于你配置的lg断点值） -
max-w-lg默认是max-width: 32rem（512px），和屏幕断点无关，是独立尺寸体系 - 两者不可混用逻辑：不存在
max-w-screen-md，只有max-w-screen-{name}，且name必须是你tailwind.config.js里screens定义的键名
响应式 max-w 需要显式前缀，不能靠父级断点继承
写成 md:max-w-lg 才会在 ≥768px 时启用该最大宽度；如果只写 max-w-lg，它在所有断点都生效。很多人以为套个 md:flex 父容器就能让子元素的 max-w- 自动响应，其实不会。
- 断点前缀必须加在
max-w-类本身上，例如：sm:max-w-xs md:max-w-md lg:max-w-4xl - 不支持像 CSS 那样用媒体查询嵌套，每个断点都要单独声明
- 如果同时写了
max-w-md和md:max-w-lg，小屏幕用md值，大屏幕覆盖为lg值——注意覆盖顺序，后面写的会生效
自定义 max-w 值必须改配置，不能用方括号语法
max-w-[600px] 是无效写法，Tailwind 不支持对 max-w- 使用任意值方括号语法（不像 w-[600px] 那样允许）。想加新尺寸，必须进 tailwind.config.js 改 theme.maxWidth。
- 正确做法：
module.exports = { theme: { maxWidth: { 'custom': '600px', 'wide': 'min(80ch, 90%)', } } }然后才能用max-w-custom或max-w-wide - 错误写法：
max-w-[600px]、max-w-[min(80ch,90%)]—— 构建时会被忽略 - 注意：自定义值不会自动带响应式变体，需在
variants.extend.maxWidth中手动开启responsive（默认已开）或其他变体如hover
真正容易被忽略的是：max-w 不解决“内容溢出”问题，它只管容器宽度上限；如果内部有长单词或未折行文本，还得配 break-words 或 overflow-wrap 类，否则视觉上还是破框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
