screens 必须是键值对对象，如 sm: '640px'；数组或函数写法在 Tailwind v3.3+ 中静默失效；新增断点应通过 theme.extend.screens 扩展，默认断点不可全量覆盖；键名不能为纯数字，值必须带单位；修改配置后需重启开发服务器并验证 CSS 输出与类名使用。
tailwind.config.js 中 screens 必须是对象，不是数组或函数
写成 screens: ['640px', '768px'] 会静默失效——Tailwind v3.3+ 完全忽略数组，连错误都不报，md:text-lg 这类类名压根不会出现在生成的 CSS 里。
常见错误还包括用函数返回对象：screens: () => ({ sm: '640px' })，v3.3+ 已不支持（除非启用 JIT 扩展且明确配置）。
正确写法只有一种：键值对对象，比如 sm: '640px' 或 sm: '20rem'，值必须是带单位的字符串。
想加 desktop 断点但保留 sm/md/lg？用 theme.extend.screens
直接改 theme.screens 是全量替换，漏掉任何一个默认断点（比如 '2xl'），对应工具类就彻底消失，且无警告。
安全做法是只扩展，不覆盖：
• 导入默认主题（v3.4+ 稳定）：const defaultTheme = require('tailwindcss/defaultTheme')
• 或更轻量：只覆盖个别断点，如把 lg 改成 '1100px'：
module.exports = { theme: { extend: { screens: { lg: '1100px' } } } }• 新增语义化断点也走
extend，例如：desktop: '1440px'、xs: '480px'。
新增断点命名和值的合法性陷阱
键名可以任意取（xs、landscape、print 都行），但纯数字键（如 1440: '1440px'）会导致生成非法选择器 1440:text-center，浏览器直接丢弃。
值必须是合法 CSS 宽度字符串：
• ❌ xs: 480（漏单位）
• ❌ xs: '480'（单位缺失）
• ✅ xs: '480px' 或 xs: '28rem'
注意：landscape 不等于 @media (orientation: landscape)，它只是 min-width 查询，真要匹配横屏得手动写媒体查询或配合插件。
改完配置没生效？三个关键动作缺一不可
Tailwind 是编译时生成工具类，修改 tailwind.config.js 后：
• 必须完全重启开发服务器（kill 再 npm run dev，热更新不触发重建）
• 检查生成的 CSS 文件里是否存在对应 @media (min-width: 1440px) 块
• 确保模板中真实写了 desktop:w-full 这类类名，否则 PurgeCSS 会剔除未使用的断点规则
调试时别信 DevTools 设备模拟器的标签，直接执行 window.innerWidth 看真实视口宽度——在桌面浏览器缩到 320px 时，得关掉模拟器才能触发 xs: 类。
立即学习“前端免费学习笔记（深入）”；
