改 screens 是唯一生效方式，因 Tailwind 响应式类在构建时静态生成，修改后必须重启 dev 服务；screens 键名决定前缀，值须为带单位字符串，删键则对应类不生成，default 是 v3.3+ 根断点键，容器断点由 container-queries 插件独立管理。
tailwind.config.js 里改 screens 是唯一生效方式，其他任何运行时修改（CSS 覆盖、JS 切 class、@media 手写）都无效。
改 screens 配置必须重启构建服务
Tailwind 的响应式类（如 md:text-lg）是在构建时静态生成的 CSS 规则，不是运行时计算。改完 tailwind.config.js 后不重启 npm run dev 或 pnpm dev，新断点不会出现在最终 CSS 文件里。
常见错误：改了配置但没重启，然后反复检查 HTML 写法、浏览器缩放、viewport meta——其实根本没生成对应规则。
screens 值必须是带单位的字符串
键名决定前缀（sm → sm:），值必须是合法 CSS 宽度字符串："640px" 或 "40rem" 都行，但 "640" 或 640 会静默失效。
你也可以加非标准断点，比如：
module.exports = {
theme: {
screens: {
'sm': '640px',
'md': '960px', // 覆盖默认 768px
'lg': '1280px',
'print': { raw: 'print' }, // 支持媒体类型
'landscape': { raw: '(orientation: landscape)' },
}
}
}
注意：raw 写法适用于特殊媒体查询，但不能和宽度混用。
删断点会导致对应类完全不生成
如果你从 screens 对象里删掉 'xl'，那所有 xl:* 类都不会出现在 CSS 中——HTML 里写了也白写，浏览器开发者工具里搜不到对应规则。
容易被忽略的点：
立即学习“前端免费学习笔记（深入）”；
-
default（小写）才是 v3.3+ 的根断点键，别写成DEFAULT（旧写法，已失效） - 断点值倒序（如
{ sm: "800px", md: "600px" }）会让md:在更小宽度就触发，破坏移动优先逻辑 - 新增断点（如
'3xl'）要加在screens里，不是extend.screens；后者只扩展、不替换，默认断点仍保留
容器查询断点（@xs 等）和视口断点无关
插件 @tailwindcss/container-queries 提供的 @xs ~ @7xl 是容器级断点，用于 @container 查询，和 sm: md: 这类视口断点完全独立。
它们的值（如 @md 对应 min-width: 28rem）由插件自身定义，不读取 tailwind.config.js 的 screens。想改容器断点，得查插件文档配 theme.containerQueries，而不是动 screens。
