在 tailwind.config.js 中添加非标断点（如 xs、landscape）最简单方式是于 theme.extend.screens 下新增键值对，值须为带合法单位的 CSS 宽度字符串；v4 起改用 @theme 声明 --breakpoint-xxx 变量，且不支持 extend。
tailwind.config.js 中添加 xs 或 landscape 等非标断点
直接在 screens 里加新键名是最简单有效的方式，比如适配小屏手机或横屏平板。Tailwind 不限制你用什么名字，xs、landscape、print 都可以，只要值是合法 CSS 宽度字符串（带单位）。
常见错误是写成 'xs': 480（漏单位）或 'xs': '480'（单位不合法），这会导致对应类（如 xs:hidden）压根不生成。
-
screens必须放在theme.extend下，否则会覆盖全部默认断点（sm/md等全丢） - 新增断点不会自动继承默认行为，比如
landscape不会默认触发@media (orientation: landscape)，它只是个 min-width 查询——想做横屏判断得手动写@media (min-width: 768px) and (orientation: landscape)并配合插件 - 如果项目用了 PurgeCSS 或 content 扫描机制，确保模板中实际写了
xs:xxx类，否则会被剔除
为什么加了 xs:w-8 但浏览器里没效果
最常见原因是构建未重启或 CSS 没重生成。Tailwind 的响应式类是构建时静态生成的，改了配置不重启 dev server，旧 CSS 还在缓存里。
另一个隐蔽问题是断点值设得太小或与其他断点冲突。比如设了 'xs': '320px'，但同时又保留了默认 'sm': '640px'，那 xs:w-8 只在 320–639px 区间生效——如果你在桌面浏览器里缩到 320px 宽，还得关掉 DevTools 的设备模拟器，否则 window.innerWidth 读的是模拟器视口而非真实渲染宽度。
立即学习“前端免费学习笔记（深入）”；
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 打开浏览器 DevTools → Elements → 找到对应元素 → Computed 面板里搜
width，看有没有被其他规则覆盖 - 在 Console 里执行
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-xs')（v4）或查生成 CSS 文件里是否存在@media (min-width: 320px)块 - 如果是 Nuxt4 + Tailwind v4，确认断点写在
@theme块里，不是@theme static——后者会让断点变量被跳过解析
v3.3+ 和 v4 的断点配置写法差异
v3.3 起 DEFAULT 改成 default，大小写错就等于没覆盖根断点；v4 彻底弃用 JS 配置，改用 CSS 中的 @theme 声明变量，且必须用 --breakpoint-xxx 格式。
比如想加 3xl 断点：
v3.x 写法：
module.exports = {
theme: {
extend: {
screens: {
'3xl': '1920px'
}
}
}
}
v4 写法：
@theme {
--breakpoint-3xl: 120rem;
}
- v4 中不能混用
@theme static和断点声明，断点必须单独放普通@theme块 - v4 的单位支持
rem、px、em，但不支持%或无单位数值 - v3.x 里用
extend是安全的，v4 里没有 extend 概念，所有断点都靠 CSS 变量驱动，删掉某个变量就等于删掉那个断点
如何让某个样式只在「仅小屏」生效（非 min-width 逻辑）
Tailwind 默认全是 min-width，没有内置 max-md 这种语法。真要实现「只在 ≤767px 生效」，得靠组合逻辑，而不是幻想加个新断点就能解决。
- 推荐写法：
text-sm md:text-base——移动端基础样式，大屏覆盖，语义清晰、维护成本低 - 避免写
sm:block md:hidden lg:hidden xl:hidden，断点一多极易漏级，且 PurgeCSS 可能误删中间某一级 - 如果必须用 max-width 行为，可用
max-w-xs+hidden组合，但注意这是容器宽度限制，不是视口判断，嵌套深了容易失效 - 更稳妥的方案是用自定义插件注入
max-md:变体，但这需要改构建流程，不是配置文件能搞定的
断点不是越多个越好，关键在是否被真实设备尺寸覆盖。加了 4xl 却没人在 2560px 宽屏上用你的产品，那它只是增加构建体积和调试负担。
