Tailwind CSS响应式布局依赖移动优先的min-width断点前缀（sm:、md:等），screens必须为键值对对象且值带单位，自定义断点需用theme.extend.screens增量扩展，否则类名不生成或失效。
不能直接加“max-width”断点，Tailwind 的响应式机制只认 min-width 媒体查询；所谓“移动端专属”必须用移动优先 + 显式覆盖实现，否则类名生成失败或样式不生效。
tailwind.config.js 中 screens 必须是对象，数组或函数写法会静默失效
你写 screens: ['480px', '640px'] 或 screens: () => ({ xs: '480px' })，v3.3+ 版本完全不解析——既不报错，也不生成对应 CSS，xs:hidden 这类类名压根不会出现在构建产物里。
正确写法只有一种：screens 必须是键值对对象，且值必须是带单位的字符串：
-
xs: '480px'✅（语义化键名 + px 单位） -
mobile: '375px'✅（自定义键名，小写字母，无空格） -
'480': '480px'❌（纯数字键名 → 生成非法选择器480:hidden，浏览器丢弃） -
xs: 480❌（缺单位 → Tailwind 跳过该条，后续断点可能错位）
新增移动端断点必须用 theme.extend.screens，别碰 theme.screens
直接重写 theme.screens 是全量替换，漏掉任何一个默认断点（比如 sm 或 2xl），对应的所有 sm:xxx、2xl:xxx 类就彻底消失，第三方插件（如 @tailwindcss/aspect-ratio）也可能因找不到前缀而失效。
立即学习“前端免费学习笔记（深入）”；
安全做法永远是增量扩展：
- 加一个
mobile: '375px'？写进theme.extend.screens - 想把
sm从'640px'改成'576px'？也走extend.screens，写sm: '576px' - v3.4+ 可选：导入默认主题参考
const defaultTheme = require('tailwindcss/defaultTheme')，但非必需
写了 mobile:hidden 但没效果？先查这三件事
DevTools 里能看到 class 存在，但元素没隐藏——大概率不是代码写错，而是链路断了：
- 模板中该类名是否真实渲染到了 DOM？PurgeCSS 会剔除 JS 字符串拼接出来的未使用类（如
`mobile:hidden`没实际插入 HTML） - 是否依赖 DevTools 设备模拟器验证？它的宽度读数 ≠ 实际视口宽度；缩放窗口不触发
@media (min-width)，真要测得关掉模拟器或用真机访问 - 断点值单位是否合法？
mobile: '480em'（em 不被媒体查询支持）、mobile: '480'（无单位）都会被 Tailwind 忽略
“仅移动端生效”的类不能靠 max-sm:，得靠组合与顺序
Tailwind 没有 max-sm: 这种语法。所谓“只在小屏显示”，本质是“默认显示 + 大屏显式隐藏”，且层叠顺序必须严格：
-
block sm:hidden md:hidden lg:hidden—— 冗余、难维护，容易漏掉某个断点 -
block md:hidden—— 更稳：默认显示，≥md 屏幕才隐藏，符合移动优先逻辑 -
hidden md:block—— 若真需要“仅桌面”，这是唯一可靠写法；md:block lg:block xl:block是反模式，易出错且不可扩展
最常被忽略的一点：所有自定义断点修改后，必须重启开发服务器（npm run dev 或 pnpm dev），否则新类名不会出现在 CSS 输出中，改了配置也白搭。
