直接修改 theme.screens 会丢失默认断点导致 lg:、xl: 类失效；唯一安全方式是使用 theme.extend.screens 扩展，仅新增或覆盖指定断点，其余保持默认。
直接改 theme.screens 会丢掉默认断点，lg:、xl: 类全失效；用数组写法（如 screens: ['640px']）Tailwind 静默跳过，连 sm: 都不生成——最安全、唯一推荐的方式是只扩展：用 theme.extend.screens。
为什么不能直接赋值 theme.screens
因为 Tailwind 默认的 screens 是一个完整对象：{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' }。一旦你写成：
theme: {
screens: { sm: '480px', md: '768px' }
}
就等于把 lg、xl、2xl 全删了。结果是：
-
lg:w-full类压根不会出现在生成的 CSS 中 - 依赖
lg:的插件（比如@tailwindcss/aspect-ratio）直接失灵 - 所有基于
lg及以上断点的样式全部消失，且控制台零报错，极难排查
theme.extend.screens 怎么写才有效
只声明你想新增或覆盖的键，其余保持原样。例如：
module.exports = {
theme: {
extend: {
screens: {
xs: '480px',
lg: '1100px',
desktop: '1440px'
}
}
}
}
这样：
-
xs:hidden和desktop:w-1/2会正常生成 -
sm、md、xl、2xl仍按默认值工作 - 键名不能含空格或纯数字（
'1440': '1440px'→ 生成非法选择器1440:w-4） - 值必须是带单位的字符串：
'480px'✅，480❌，'20rem'✅（但必须加引号）
改完没生效？先确认这三件事
Tailwind 的响应式类是构建时静态生成的，运行时改配置毫无作用：
- 是否重启了开发服务器？改了
tailwind.config.js必须重启npm run dev或pnpm dev - 是否在 HTML 模板里真实写了
xs:hidden这类用法？PurgeCSS / content 扫描机制会剔除未使用的类 - 是否漏了
<meta name="viewport" content="width=device-width">？没有它，移动端浏览器用桌面视口渲染，断点数值完全错位
注意：v4 已弃用 JS 配置，改用 CSS 中的 @theme 声明 --breakpoint-xs 变量；如果你用的是 v4，theme.extend.screens 不起作用——但绝大多数项目目前仍在 v3.3+，所以先查清版本再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
