hidden 与断点前缀混用会失效，因 hidden 等价 display: none 且优先级更高，覆盖后续断点显示声明；正确做法是仅用断点控制显隐，如 hidden md:block lg:hidden。
为什么用 hidden + 断点前缀会失效
因为 hidden 是一个绝对隐藏指令，它等价于 display: none，而 Tailwind 的断点前缀（如 md:block）只是在对应断点下设置 display: block，但 CSS 优先级规则会让 hidden（来自更靠后的类）持续生效，覆盖掉后续的显示声明。
正确做法是只用断点控制显隐，不混用 hidden：
-
block在默认（最小）断点生效，md:hidden在中屏及以上隐藏 -
sm:flex在小屏起显示为 flex，lg:hidden在大屏隐藏 —— 注意顺序：越靠后的类权重越高，但必须保证逻辑连贯 - 避免写成
hidden md:block lg:hidden，这会导致 lg 下仍被hidden锁死
sm/md/lg 这些断点实际对应多少像素
Tailwind 默认断点是移动优先、固定值，不是“自动适配设备”，具体数值取决于你的配置（tailwind.config.js），但官方默认是：
-
sm: ≥640px（比如 iPhone SE 竖屏宽度） -
md: ≥768px（常见平板竖屏） -
lg: ≥1024px（iPad 横屏或小笔记本） -
xl: ≥1280px，2xl: ≥1536px
这些值不是媒体查询里的“设备宽度”，而是视口宽度（viewport width）。如果你项目里改过 theme.screens，那所有带前缀的类都会按新值计算，别凭经验硬记。
立即学习“前端免费学习笔记（深入）”；
如何让某个元素只在两个断点之间显示（比如仅在平板横屏时）
Tailwind 本身不提供“区间类”（如 md:only），得靠组合显隐逻辑来模拟：
- 想只在
md到lg之间显示？写成hidden md:block lg:hidden - 注意顺序：先设默认隐藏，再在
md显，再在lg隐藏，这样才不会漏掉边界 - 如果用了自定义断点（比如加了
tablet），记得检查断点是否严格递增，否则中间可能出现“真空区” - 这种写法在 SSR 或 hydrate 阶段可能造成闪动，因为初始 HTML 里元素存在但被
hidden，JS 加载后才补上断点类 —— 关键内容建议服务端渲染时就判断好
用 print:hidden 时为什么页面打印还是显示
print:hidden 是 Tailwind 提供的打印专用断点，但它依赖浏览器对 @media print 的支持和触发时机。常见问题有：
- 开发工具里用“打印预览”模式才真正激活
print:类，普通页面浏览不会生效 - 某些 Chrome 版本在 DevTools 的“Rendering”面板里勾选 “Emulate CSS media” → “print” 才能调试
- 如果用了 CSS-in-JS 或动态 class 拼接（如
className={`${show ? 'block' : 'hidden'} print:hidden`}），要确认字符串拼接没破坏print:hidden的完整 token - 第三方 UI 库的组件可能自带内联样式或更高优先级 class，会覆盖
print:hidden
断点前缀本质是媒体查询的语法糖，它不改变 DOM 结构，也不影响可访问性（aria-hidden 还得自己加）。最易被忽略的是：断点生效与否，完全取决于当前视口宽度，而不是设备类型或用户代理 —— 别假设“手机就一定走 sm”。
