最常见失效原因是screens写成数组或函数，v3.3+仅认纯对象；必须用theme.extend.screens新增断点，值须带单位，修改后需重启开发服务器并验证css输出。
tailwind.config.js 中 screens 格式是否合法
最常见失效原因是 screens 写成了数组或函数，Tailwind v3.3+ 严格只认纯对象。写成 screens: ['640px', '768px'] 或 screens: () => ({ sm: '640px' }) 会静默跳过整个响应式系统——你写的 md:text-lg 在最终 CSS 文件里根本不存在。
必须用键值对，且值是带单位的字符串：
-
sm: '640px'✅ -
xl2: '1920px'✅（推荐走extend.screens） -
1920: '1920px'❌（纯数字键名 → 生成非法选择器1920:text-center，浏览器直接忽略） -
xl2: 1920❌（漏单位，不生成对应类）
新增断点是否用了 extend.screens 而不是 screens
直接改 screens 是全量替换，漏掉任意一个默认键（比如 lg），所有 lg:xxx 类就彻底消失——第三方插件如 @tailwindcss/aspect-ratio 依赖它生成类，也会跟着失效。
安全做法永远是 theme.extend.screens：
- 只新增
xl2: '1920px'？→extend: { screens: { xl2: '1920px' } } - 只改
lg从'1024px'到'1100px'？→ 同样走extend - 想保留全部默认断点 + 加语义化名如
desktop: '1440px'？→ 还是extend
开发服务器是否完全重启
Tailwind 是编译时工具，tailwind.config.js 修改后热更新不会触发重编译。必须手动终止当前 npm run dev 进程，再重新运行。
验证方式很直接：
- 打开构建后的 CSS 文件（如
dist/assets/app-*.css），搜索@media (min-width: 1920px)，不存在就说明配置没生效 - 在 DevTools Elements 面板里手动给元素加
xl2:w-full，如果立刻生效，说明是 PurgeCSS 剔除了未使用的类；如果不生效，大概率是配置或服务没重启 - Nuxt/Next 等框架缓存更顽固，可能需要清掉
.nuxt或.next目录
content 配置是否扫描到了新断点类名
即使配置和重启都对了，如果模板里压根没出现 xl2:w-full 这种字符串，PurgeCSS 就会把它当“未使用类”剔除。
排查要点：
- 确保
content数组覆盖了你写类名的文件路径，比如 Vue 组件在src/components/，就得写'./src/components/**/*.{vue,js}' - 路径不能有语法错误：
./**/*.html✅，但"./**/*.html"多余引号 ❌，./components/**/*.vue漏了src/前缀也可能扫不到 - 动态拼接类名（如
:class="`xl2:${isWide ? 'w-full' : 'w-1/2'}`"）需显式加到safelist，否则会被删
真正容易被忽略的是：断点值本身可能已被项目修改过，sm 不一定等于 640px——调试前先打开 tailwind.config.js 确认实际定义，比背官方文档管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
