最安全的配置方式是使用 theme.extend.screens；直接赋值 theme.screens 会覆盖默认断点导致 lg: 等类失效，数组写法则静默失败；需仅扩展键值，值须为带单位字符串，修改后需重启构建并验证 CSS 和引用。
theme.extend.screens 是最安全、最常用的配置方式，直接改 theme.screens 会丢掉默认断点，导致 lg:、xl: 等类彻底不生成。
为什么不能直接赋值 theme.screens
写成 theme.screens = { sm: '640px', md: '768px' } 会完全覆盖默认配置。漏掉 lg，所有 lg:w-full 类就消失；第三方插件（比如 @tailwindcss/aspect-ratio）依赖的 lg: 前缀也会失效。
更危险的是数组写法：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 的响应式类是构建时静态生成的，运行时改配置毫无作用：
- 手动终止
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，是设计逻辑。改一个像素值，实际是在动整个响应式系统的地基，尤其当项目用了多个插件时，容易漏掉隐式依赖。
