<p>tailwind.config.js 中 screens 必须是对象而非数组，否则断点类不生成；新增断点需用 theme.extend.screens 增量扩展，避免覆盖默认值；v4 改用 @theme 声明断点变量，且必须带 --breakpoint- 前缀、小写、单位统一。</p>
tailwind.config.js 中的 screens 必须是对象，不能是数组
Tailwind 会直接读取 theme.screens 的键值对生成媒体查询，如果误写成数组（如 screens: ['640px', '768px']），构建会静默失败或断点完全不生成。你看到的类名（比如 md:text-lg）压根不会出现在最终 CSS 里。
正确结构必须是纯对象：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
desktop: '1440px', // ✅ 新增语义化断点
}
}
}
- 所有键名会成为类前缀，
desktop:text-right对应@media (min-width: 1440px) - 值必须是字符串，带单位（
'1440px'或'90rem'），写数字1440会被转成1440px，但显式写字符串更稳 - 键名避免纯数字（如
'1440': '1440px'），否则生成的类是1440:text-center，CSS 选择器非法
新增断点时，原有断点不会自动保留
写 screens 就是**完全替换**默认配置，不是“追加”。如果你只写了 desktop，那 sm、md 全都没了——HTML 里写的 sm:hidden 依然存在，但对应规则根本没生成，浏览器里查不到。
两种安全做法：
立即学习“前端免费学习笔记（深入）”；
- 显式复制全部默认断点再加新项（适合断点改动多的项目）
- 改用
theme.extend.screens，只增量扩展（推荐）：
module.exports = {
theme: {
extend: {
screens: {
desktop: '1440px',
'3xl': '1920px',
}
}
}
}
这样 sm/md 等保持原样，只新增类，不易漏、不破坏第三方插件依赖（比如 @tailwindcss/aspect-ratio 只认默认断点名）。
改完配置必须重启构建服务，热更新不生效
Tailwind 是编译时工具，tailwind.config.js 修改后，旧 CSS 文件里没有新断点对应的媒体查询。常见现象：写了 desktop:flex，但 DevTools 的 <style> 标签里搜不到这条规则。
- 必须彻底 kill 当前
npm run dev进程，再重新启动 - 检查生成 CSS 文件体积是否明显增大（每个新断点会增加一组媒体查询）
- 在浏览器控制台运行
window.innerWidth，确认当前宽度 ≥ 你设的值（比如1440） - 如果用的是 PostCSS，确保
tailwindcss()插件在postcss.config.js中排在autoprefixer之前
v4 版本不再用 tailwind.config.js，改用 CSS @theme
Tailwind CSS v4 彻底弃用 JS 配置文件，断点统一通过 CSS 原生变量声明：
@theme {
--breakpoint-desktop: 1440px;
--breakpoint-3xl: 1920px;
}
但注意：@theme static 不会触发工具类生成，只注入 CSS 变量。必须用无修饰的 @theme（非 static），否则 desktop:w-full 这类类名不会被识别和输出。
另外，v4 默认断点单位是 rem（如 --breakpoint-xl: 80rem），自定义时单位要一致，混用 px 和 rem 可能导致层叠顺序错乱。
最易忽略的一点：v4 的断点变量名必须带 --breakpoint- 前缀，且键名小写，写成 --BREAKPOINT-DESKTOP 或 --breakpoint_DESKTOP 都无效。
