改 theme.screens 是唯一可靠方式，需用键值对对象（如 sm: '640px'），保留或合并默认断点，新增语义化断点，并重启开发服务。
改 theme.screens 是唯一可靠方式，数组写法、漏掉默认断点、不重启服务，这三类错误占了 90% 的“自定义断点不生效”问题。
tailwind.config.js 中 screens 必须是纯对象，不能是数组
常见错误是把默认配置复制成数组格式：['640px', '768px']，这会让 Tailwind 启动失败或直接忽略整个 screens 配置。Tailwind v3.4+ 要求它必须是键值对对象——键是断点名（如 sm），值是带单位的字符串（如 '640px'）。
正确写法示例：
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
desktop: '1440px' // ✅ 新增语义化断点
}
}
}
- 键名会直接变成类前缀，
desktop:text-right就是合法的 - 值必须是字符串，
md: 768会被转成768px，但显式写'768px'更稳 - 纯数字键（如
1440: '1440px'）会导致生成1440:text-center，CSS 选择器非法，浏览器直接忽略
保留默认断点，或显式合并再扩展
如果你只写 { desktop: '1440px' }，那 sm:、md: 全部消失——Tailwind 不会自动继承默认值。所有你用到的断点都得手动列出来。
推荐做法是先引入默认配置再扩展：
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
screens: {
...defaultTheme.screens,
desktop: '1440px'
}
}
}
-
defaultTheme.screens在 v3.4+ 是稳定 API，可放心用 - 删掉某个默认断点（比如去掉
sm），那所有sm:类都不会生成，HTML 里写了也无效 - 新增断点建议用语义名（
tablet、desktop），别用像素值当键名
修改后必须重启开发服务器
Tailwind 是编译时工具，不是运行时注入。改完 tailwind.config.js 后，旧 CSS 文件里压根没有新类名对应的选择器。
排查步骤：
- 确认进程已完全 kill，再
npm run dev（热更新不触发重建） - 检查生成的 CSS 文件体积是否变大（新增断点 = 新增媒体查询块）
- 在 DevTools 的
<style></style>标签里搜索@media (min-width: 1440px)或desktop:text-right - 如果用 PostCSS，确保
tailwindcss()插件排在autoprefixer前面
断点值顺序和 min-width 逻辑容易被忽略
所有 Tailwind 断点默认都是 @media (min-width: X)，不是 max-width，也不是区间。这意味着：
-
sm: text-sm+md: text-lg：768px 及以上显示text-lg，640–767px 显示text-sm，小于 640px 也显示text-sm - 断点值不能倒序，
{ sm: '700px', md: '600px' }会让md:比sm:更早触发，破坏移动优先逻辑 - 没声明
md:，只写了sm:和lg:，那 768–1023px 这个区间就没有任何响应式控制
真正难搞的不是怎么加新断点，而是改完之后发现小屏布局塌了——因为把 md 从 '768px' 改成 '700px'，结果平板横屏（720px）就开始套用中屏样式了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
