theme.extend.screens 是最安全、最常用的方式，改一个断点不会丢掉其他默认断点，也不影响插件兼容性；直接赋值 theme.screens 会完全覆盖默认配置，导致漏掉的断点类失效，数组写法更会导致静默失败。
theme.extend.screens 是最安全、最常用的方式，改一个断点不会丢掉其他默认断点，也不影响插件兼容性。
为什么不能直接改 screens 对象？
直接写 theme.screens = { sm: '640px', md: '768px' } 会完全覆盖默认配置。漏掉 lg，所有 lg: 类（包括 @tailwindcss/aspect-ratio 插件生成的）就彻底不出现；写成数组 screens: ['640px', '768px'] 更糟——Tailwind 静默跳过解析，连 sm: 都失效，控制台也不报错。
theme.extend.screens 怎么写才有效？
只声明你想改或加的键，其余保持原样：
module.exports = {
theme: {
extend: {
screens: {
lg: '1100px',
xs: '480px',
desktop: '1440px'
}
}
}
}
-
lg: '1100px'会覆盖默认值，但sm、md、xl照常生成 -
xs和desktop是新增断点，类名如xs:hidden、desktop:w-1/2可直接用 - 键名不能含空格或特殊字符，也不能是纯数字（
'1440': '1440px'→ 生成非法选择器1440:w-4） - 值必须是带单位的字符串：
'480px'✅，480❌（虽可能被转义，但'20rem'这类必须引号）
改完没生效？先查这三件事
Tailwind 的响应式类是构建时静态生成的，运行时改配置毫无作用：
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 手动终止
npm run dev进程，再重启——热更新不读新配置 - 打开生成的 CSS 文件，搜索
@media (min-width: 1100px)或你设的新值，确认媒体查询存在 - 检查模板里是否真写了
xs:w-8这类类名；若用了 PurgeCSS，没在代码中引用就会被剔除
v3.3+ 和 v4 的关键差异别踩坑
v3.3 起默认断点键从 DEFAULT 改为小写 default，写成 DEFAULT: '1200px' 就等于没写；v4 彻底弃用 JS 配置，改用 CSS 中的 @theme 声明 --breakpoint-xxx 变量——老写法在 v4 下完全无效。
立即学习“前端免费学习笔记（深入）”；
断点语义本身容易被忽略：它只是 min-width 查询，不是“仅在此尺寸生效”，md:text-lg 在 1024px 宽度下依然起作用（因为 ≥768px），这不是 bug，是设计逻辑。
