必须用theme.extend.screens新增xs断点，因直接重写theme.screens会全量替换并静默剔除默认断点（如sm、md），导致对应工具类不生成；键名须语义化（如xs）、值须带单位（如'480px'），且修改后需重启开发服务器并验证css输出。
直接改 tailwind.config.js 中的 screens 配置就能新增移动端断点，但必须用 theme.extend.screens，不能覆盖默认值，否则 sm:、md: 这些类会彻底消失——Tailwind 不报错，只是静默剔除。
为什么新增 xs 断点要走 extend 而不是重写 screens
Tailwind 默认断点（sm、md、lg 等）不会自动继承。如果你写成 screens: { xs: '480px' }，整个默认断点对象就被替换了，sm:text-lg 这类工具类压根不会生成 CSS。
- ✅ 安全做法：只扩展，不覆盖 —— 用
theme.extend.screens - ❌ 危险写法：
theme.screens: { xs: '480px', sm: '640px', ... }（漏掉任一默认键，对应类就失效） - ⚠️ 不推荐手动复制全部默认值，容易遗漏；v3.4+ 可导入
defaultTheme合并，但对单个新增断点来说太重
xs: '480px' 这类写法的合法性陷阱
新增断点看似自由，但键名和值都有硬性约束，错一个就导致类名无效或浏览器忽略。
- 键名不能是纯数字，比如
480: '480px'会生成480:text-center，CSS 选择器非法，浏览器直接丢弃 - 值必须是带单位的字符串：
'480px'✅，480❌，'480'❌，'28rem'✅ - 语义化命名更可靠：
xs、mobile、iphone都可以，只要不是纯数字
改完配置后类名不生效？三个动作缺一不可
Tailwind 是编译时生成工具类，不是运行时解析，所以修改配置 ≠ 立刻可用。
- 必须完全重启开发服务器（
kill当前进程 +npm run dev），热更新不触发重建 - 检查构建输出的 CSS 文件里是否存在
@media (min-width: 480px)块（搜索关键词即可） - 确保模板中真实写了
xs:w-full这类用法，否则 PurgeCSS 会把它从最终 CSS 中剔除
移动端适配真正起效的关键不在断点数量，而在使用方式
加了 xs 断点不代表自动适配手机——你得主动用它。Tailwind 是移动优先，基础样式（无前缀）默认作用于最小屏，更大的断点只是“覆盖”。
- 错误示范：
xs:w-80 md:w-full（xs:在 ≥480px 才生效，小屏如 375px 反而没控制） - 正确逻辑：先写小屏基础类（
w-full），再用断点逐步增强，比如w-full xs:w-80 md:w-auto - 真要覆盖超小屏（≤375px），得靠 JS 检测
window.innerWidth或配合插件，Tailwind 的xs:本质仍是min-width查询
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
