最常见原因是开发服务器未重启，tailwind是编译时工具，修改screens后必须完全重启npm run dev进程；其次可能是purgecss未扫描到类、screens配置格式错误、content路径未覆盖使用位置、cdn版本不支持自定义断点。
tailwind.config.js改了但断点类不生成
最常见原因是开发服务器没重启。Tailwind 是编译时工具，tailwind.config.js 里改了 screens，必须完全 kill 当前 npm run dev 进程、重新启动——热更新不会触发重编译。你写的 xl2:w-full 在构建产物里根本不存在，浏览器自然不认。
另一个隐蔽原因：PurgeCSS 扫描不到该类。如果你只在 JS 里动态拼接 className（比如 clsx(`xl2:${size}`)），或模板里压根没出现 xl2:w-full 这个完整字符串，它就会被静默剔除。
- 验证方法：打开构建后的 CSS 文件（如
dist/assets/style.css），搜索@media (min-width: 1920px)，看是否存在 - 临时调试：在 DevTools Elements 面板手动给元素加
xl2:w-full，如果立刻生效，说明是 PurgeCSS 或扫描路径问题 - 注意关掉 DevTools 的设备模拟器——它会干扰
window.innerWidth判断，但不影响真实媒体查询匹配
screens 配置格式错误导致整个响应式系统失效
Tailwind v3.3+ 严格要求 screens 必须是键值对对象，数组、函数、缺单位、纯数字键名都会让配置静默失败，且零报错。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ❌ 错误写法：
screens: ['640px', '768px']（数组）、xl2: 1920（缺单位）、1920: '1920px'（纯数字键 → 生成非法选择器1920:w-full，浏览器直接丢弃） - ✅ 正确写法：
extend: { screens: { xl2: '1920px', desktop: '1440px' } } - ⚠️ 不要用
theme.screens全量替换，除非你显式列出所有默认断点（sm、md、lg、xl、2xl），漏一个，对应前缀的类就全消失
content 路径没覆盖到实际使用位置
Tailwind 不运行时解析 class 字符串，而是静态扫描源码中字面量出现的类名。如果 content 没匹配到你的组件文件，xl2:w-full 再合法也不会进最终 CSS。
- 常见遗漏：
content: ['./src/*.js']漏掉 TSX；./app/**/*.{ts,tsx}没加进 Next.js App Router 项目 - MDX、Astro、Lit 等非标准模板也得显式加入，比如
./src/**/*.mdx - 动态类名（如
from-${color}-500）必须用safelist预声明，正则要写成/from-[a-z]+-500/，不是字符串'/from-[a-z]+-500/'
CDN 版本根本不支持自定义断点
用 https://cdn.tailwindcss.com 时，断点前缀（sm:、md: 等）压根不生效——CDN 只提供约 3200 个高频静态类，不含任何响应式变体，也不执行 @screen 或配置文件。
- 验证方式：在控制台输入
tailwind.config，如果返回undefined或空对象，说明 CDN 未加载配置 - 想用自定义断点，必须走本地构建流程，不能依赖 CDN
- CDN 下暗黑模式也要手动启用：
tailwind.config = { darkMode: 'class' }，否则dark:bg-slate-800无效
sm 不一定等于 640px，调试前先打开 tailwind.config.js 确认实际定义，比背官方默认值管用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
