Tailwind自定义断点必须在theme.screens中使用对象语法，如sm: '640px'；数组写法会导致断点失效或构建失败，且会完全替换默认断点，修改后需重启开发服务器。
screens 配置必须用对象语法，数组写法会直接导致断点失效或构建失败——这是最常踩的坑，改完不生效，八成是这里错了。
tailwind.config.js 中 screens 必须写成纯对象，不能是数组
Tailwind 只识别 screens 是一个键值对对象。常见错误是复制默认配置时保留了数组形式：screens: ['640px', '768px']，这会让整个响应式系统静默崩溃。
- ✅ 正确：用对象显式声明每个断点名和对应宽度，例如
sm: '640px' - ❌ 错误：
screens: ['640px', '768px']（数组）、screens: () => ({ sm: '640px' })（函数返回，v3.3+ 以外不支持） - 值支持
px、rem、em，也支持无单位数字（如sm: 40→ 自动转为40px） - 如果你只写了
sm和md，那lg、xl就彻底没了——Tailwind 不会“合并”你写的和默认的，而是完全替换
想保留默认断点只改其中几个？用 theme.extend.screens
直接覆盖 screens 对象风险高，尤其在团队协作或引入插件时容易漏掉关键断点（比如 @tailwindcss/aspect-ratio 依赖 lg 生成类）。更安全的做法是只扩展或修正部分：
- ✅ 推荐写法：
extend: { screens: { lg: '1100px' } }—— 其他断点（sm、md、xl等）保持默认 - ⚠️ 注意：v3.3+ 后，
DEFAULT已改为小写default；写成DEFAULT: '1200px'会被忽略 - 新增断点（如
xxs或tablet）也建议走extend，避免意外清空原有配置
改完必须重启开发服务器，且检查生成 CSS 是否包含新类
Tailwind 的响应式类是在构建时静态生成的，运行时改配置毫无作用。哪怕你热更新了 tailwind.config.js，浏览器里也不会自动刷新出 md:text-lg 这类新规则。
- 执行
npm run dev或tailwindcss -i src/input.css -o dist/output.css --watch前，先手动终止并重启进程 - 打开生成的 CSS 文件，搜索
@media (min-width: 768px)或你自定义的值（如1100px），确认媒体查询存在 - 如果用了 Nuxt、Next 等框架，注意其构建缓存机制——有时需加
--no-cache或删.nuxt/.next目录
别忽略断点语义和第三方插件兼容性
自定义断点不只是改个像素值，它会影响所有基于该前缀生成的工具类，包括插件输出的类名。
立即学习“前端免费学习笔记（深入）”；
- 断点是
min-width逻辑，md:col-6在 1024px 宽度下不会生效（因为lg覆盖了它），这点容易被误判为“断点没起作用” - 第三方插件（如
@tailwindcss/forms、@tailwindcss/typography）通常只监听默认断点名；把md改成tablet，它们生成的md:w-full类就没了 - 如果项目用了
@theme static（如 Nuxt UI 场景），不要把断点变量写进那里——@theme static不注入 CSS 变量，断点不会被识别
screens 配置，改完立刻验证几个关键断点类是否出现在构建产物里。 
