必须修改 tailwind.config.js 中的 screens（v3.3+）或 theme.breakpoints（旧版）才能生效，其他方式无效；screens 必须是纯对象，键名如 md 对应类前缀，值须为带单位字符串（如 '800px'），v3.3+ 使用 default 而非 DEFAULT，删减或新增断点需谨慎处理默认配置。
必须改 tailwind.config.js 中的 screens（v3.3+）或 theme.breakpoints（旧版），其他任何地方改都不生效。
改 screens 是唯一可靠方式
Tailwind 的响应式类（如 md:text-lg）在构建时就生成对应 CSS，运行时无法动态修改断点。想让 md: 指向 800px 而不是默认 768px？只能动配置文件。
常见错误包括：在 CSS 里覆盖 @media、用 JS 切 class、或试图在组件里传断点参数——这些对 Tailwind 的响应式机制完全无效，只会导致样式不一致和调试困难。
正确做法是导出对象，并确保 screens 是纯对象（不能是函数，除非你明确启用了 v3.4+ 的 JIT 扩展）：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '800px', // ← 这里改
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
}
}
}
注意：sm、md 这些键名会直接变成类前缀，值必须是带单位的字符串（如 '800px' 或 '50rem'），写成 800 会静默失败。
v3.3+ 必须用 default 而不是 DEFAULT
老教程里常写 DEFAULT: '1024px'，这是 v3.2 及以前的写法。v3.3 开始，根断点键名已改为小写 default。写错就等于没覆盖，xl: 等仍按默认值走。
立即学习“前端免费学习笔记（深入）”；
如果你要调整“无前缀”情况下的基准断点（即所有未加前缀的类生效的最小宽度），得这么写：
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
default: '992px' // ← 影响未加前缀的类（如 text-lg）何时开始生效
}
但注意：default 不影响已有前缀类（如 md:text-lg），它只控制基础层的触发阈值。多数项目不需要动它，除非你真有特殊布局逻辑依赖这个行为。
删断点或新增断点要小心
删掉 sm: 后，所有 sm:xxx 类都不会生成——即使你在 HTML 里写了，CSS 文件里也找不到对应规则，浏览器自然不生效。
新增断点（比如加个 tablet）时，别只往 screens 里塞键值对就完事：
- 如果你用的是 extend.screens，旧断点会被保留；
- 如果直接重写 screens，旧断点全被替换，容易漏掉 2xl 或 print 这类非主流但有用的断点；
- 自定义断点名（如 landscape）需确认是否被插件或构建工具识别，否则可能白配。
推荐做法是先展开默认配置再扩展：
const defaultScreens = require('tailwindcss/defaultTheme').screens
module.exports = {
theme: {
screens: {
...defaultScreens,
tablet: '900px'
}
}
}
容器查询断点（@xs 等）和视口断点不是一回事
别混淆 md:text-lg（作用于视口）和 @md:grid-cols-3（作用于容器）。后者来自 @tailwindcss/container-queries 插件，它的断点独立配置，默认从 @xs（20rem）到 @7xl（80rem），单位是 rem，且基于容器宽度而非屏幕宽度。
如果你同时用两种响应式，要分别维护两套断点：
- 视口断点改 theme.screens；
- 容器断点改插件的 containerQueries.screens（需在插件配置中显式声明）；
- 两者命名可以相同（如都叫 md），但数值和语义完全独立，别指望改一个会影响另一个。
最容易被忽略的是：容器查询需要父元素显式设 container（或 container-type: inline-size），否则 @md: 类压根不触发——这点和视口断点完全不同，调试时得先确认容器是否被正确标记。
