Tailwind v3+ 默认禁用 print 变体，需在 tailwind.config.js 的 screens 中手动添加 print: { raw: 'print' } 并重启服务；content 路径须覆盖所有相关文件（如 ./src/**/*.{js,jsx,ts,tsx}）；分页需手写 @layer utilities 注入 break-before: page 与 page-break-before: always 回退。
print:hidden 为什么完全没反应
不是你写错了，是 Tailwind v3+ 默认压根没启用 print 变体——它不会为 @media print 生成任何 CSS 规则，哪怕你写了 print:hidden，构建后也查不到对应样式。
根本原因在于：Tailwind 的变体（如 hover、focus）默认只启用有限几个，print 不在其中。它被显式禁用，不是遗漏，是设计如此。
-
tailwind.config.js的screens里必须手动加一条：print: { raw: 'print' } -
raw: 'print'是唯一合法写法；写成print: 'print'或省略raw字段都无效 - 改完必须重启开发服务器（
npm run dev），热更新不重读配置
content 路径漏掉 TSX/JSX 就等于白配
即使 print 变体已注册，如果 content 数组没覆盖到实际写 print:hidden 的文件，PurgeCSS 会在构建时直接删掉这些类。
常见失效路径写法：
立即学习“前端免费学习笔记（深入）”；
-
"./src/*.js"→ 漏掉.tsx和嵌套目录，React 组件全失效 -
"../src/App.tsx"→ glob 不支持相对路径写法，Tailwind 直接跳过该条 -
"./public/index.html"→ Vite 默认不扫描public/，需显式加入
正确写法（React + TypeScript）：
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html"
]
break-before: page 不能用 print: 修饰
Tailwind 根本不支持 print:break-before-page 这种写法——它没注册该变体，解析器直接忽略，也不会生成任何规则。
分页控制必须手写，推荐用 @layer utilities 注入：
@layer utilities {
.print\:break-before-page {
break-before: page;
page-break-before: always;
}
}
注意两点：
-
break-before: page只对块级元素生效；给<span>加无效 - 父容器若有
overflow: hidden或filter，会静默破坏分页上下文，加了也白加
打印预览和真实输出行为不一致
Chrome 打印预览显示正常，不代表真机打印也生效；Safari 对 break-before 支持弱，甚至忽略 page 值。
所以必须同时提供现代标准和回退：
- 用
break-before: page（W3C 标准） - 加
page-break-before: always（旧版回退） - 避免依赖单一属性，否则部分浏览器或打印机驱动会丢弃整条规则
最易被忽略的点：分页逻辑依赖渲染树结构，而 display: none 或 visibility: hidden 在打印媒体中可能被某些引擎误判为“不可分页内容”，导致 break-before 失效。务必用 print:hidden 配合显式分页类组合使用。
