直接改 theme.screens 对象即可生效，但必须用键值对对象语法（如 sm: '640px'），数组写法会被静默忽略，漏断点会全量替换默认值，且修改后必须重启开发服务器。
直接改 theme.screens 对象就能生效，但写错格式、漏掉默认断点、不重启服务——这三件事做错一个，新断点就永远不出现在 CSS 里。
为什么 screens: ['640px', '768px'] 会静默失效
Tailwind v3.3+ 严格要求 screens 必须是键值对对象，数组会被完全忽略，连构建错误都不报。你写的类名（比如 md:text-lg）在生成的 CSS 文件里压根不存在，浏览器自然不认。
- ✅ 正确：用字符串键 + 带单位字符串值，如
sm: '640px'或sm: '20rem' - ❌ 错误：
screens: ['640px']（数组）、screens: () => ({ sm: '640px' })（函数，v3.3 以前才支持）、sm: 640（无单位数字在某些插件场景下可能被误转） - ⚠️ 注意：纯数字键（如
1440: '1440px'）会导致生成非法 CSS 选择器1440:text-center，浏览器直接丢弃
想加 desktop 断点但保留默认的 sm/md/lg
不能只写新增项，Tailwind 不合并配置，而是全量替换。漏掉任何一个原有断点，对应前缀的工具类（如 xl:w-full）就彻底消失，且不会警告。
- ✅ 推荐：用
require('tailwindcss/defaultTheme')导入默认值再扩展，v3.4+ 稳定可用 - ✅ 安全写法示例：
const defaultTheme = require('tailwindcss/defaultTheme')<br>module.exports = {<br> theme: {<br> extend: {<br> screens: {<br> desktop: '1440px'<br> }<br> }<br> }<br>} - ⚠️ 避免直接覆盖
theme.screens，除非你明确列出所有要用的断点（包括'2xl'这种带特殊字符的键）
xs 或 landscape 这类非标断点怎么加
名字随便起，但值必须是合法 CSS 宽度字符串，且得确保模板里真用了对应类名，否则 PurgeCSS 会把它删干净。
- ✅ 合法：
xs: '480px'、landscape: '768px'（注意：它仍是min-width，不是 orientation 查询） - ❌ 无效：
xs: 480（缺单位）、xs: '480'（单位不合法）、xs: '480em'（em 在断点中语义混乱，慎用） - ? 验证是否生效：打开生成的 CSS 文件，搜索
@media (min-width: 480px)；或在控制台执行getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xs')（仅 v4）
改完配置为什么浏览器里还是没效果
因为 Tailwind 是编译时生成工具类，运行时改配置毫无意义。热更新不会重读 tailwind.config.js，旧 CSS 文件也不会自动刷新。
- ✅ 必须手动终止当前开发进程（Ctrl+C），再重新运行
npm run dev或等效命令 - ✅ 检查生成 CSS 文件体积是否增大，搜索新类名（如
desktop:grid-cols-3）是否出现在其中 - ⚠️ Nuxt/Next 用户额外注意：框架缓存可能更顽固，必要时删掉
.nuxt或.next目录再启动
最常被忽略的是第三方插件依赖默认断点名——比如把 md 改成 tablet，@tailwindcss/aspect-ratio 就不会输出 tablet:aspect-square 类。加断点不是改个数字就完事，得通盘考虑整个工具链的兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
