最常见错误是将screens直接写在module.exports顶层而非theme对象内，正确路径必须为theme.screens；screens必须是键值对对象而非数组，键名需为字符串且与类名严格一致，修改后须重启开发服务器。
tailwind.config.js里screens没放在theme下
最常见错误是把screens直接写在module.exports顶层，而不是嵌套在theme对象里。Tailwind 只认theme.screens这个路径，其他位置一概忽略。
错误写法：
module.exports = {
screens: { sm: '640px', md: '768px' }, // ❌ 不生效
}
正确写法：
module.exports = {
theme: {
screens: { sm: '640px', md: '768px' }, // ✅ 必须在这里
}
}
- 如果用了
extend，也要确保路径是theme.extend.screens，不是extend.screens -
theme对象本身不能是函数（v3.4+ JIT 模式除外），否则配置不加载 - 检查文件是否被正确导入：确认
tailwind.config.js和postcss.config.js在同一项目根目录
screens写成数组而不是对象
Tailwind v3 要求screens必须是键值对对象，数组写法会静默失败或报错（取决于版本），生成的 CSS 里压根没有对应媒体查询。
错误写法：
theme: {
screens: ['640px', '768px', '1024px'] // ❌ 数组 → 断点全丢
}
正确写法（哪怕只改一个断点，也得补全全部）：
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px'
}
}
- 用
extend更安全：只覆盖想改的，其余保留默认 - 键名必须是字符串（包括带连字符的
'2xl'），不能是数字或变量 - 值必须是字符串，如
'768px'；写768会被转成768px，但显式写字符串更稳
改了配置但没重启开发服务器
Tailwind 是编译时工具，tailwind.config.js变更不会热更新。保存文件后，旧进程仍用缓存的配置，新断点类根本不会生成。
- 必须彻底终止当前
npm run dev（或pnpm dev等），再重新启动 - 检查浏览器里生成的 CSS 文件体积是否变大——新增断点会增加媒体查询数量
- 在开发者工具的
标签中搜索@media (min-width: ...)，确认有你新加的值 - 如果用 PostCSS，确认
tailwindcss()插件排在autoprefixer之前
断点名和类名不匹配或拼写错误
类名前缀必须和screens对象的键名完全一致，大小写、连字符、引号都不能错。
比如配置了'desktop': '1440px'，就得用desktop:text-right，不能写成Desktop:text-right或desktop:textRight。
- 键名含特殊字符（如
'2xl'）必须加单引号，否则 JS 解析报错 - 别用纯数字键名，如
'1440': '1440px'→ 生成的类名是1440:text-center，CSS 选择器非法 - 删掉某个默认断点（比如漏写
lg），那所有lg:类都不会出现在最终 CSS 中，即使 HTML 写了也无效
Tailwind 的断点机制不依赖运行时 JS，也不响应窗口 resize 事件——它完全靠构建时生成的 CSS 规则匹配。一旦配置路径、格式或重启流程出问题，就只剩白屏调试。最省事的做法：先复制官方默认screens对象，再逐个调整，避免遗漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
