Tailwind 默认不启用 print 变体，需在 tailwind.config.js 中显式添加 raw: 'print' 并重启服务；print 修饰符仅支持基础工具类，分页控制须手写 @layer utilities 或直接使用 @media print 原生规则。
print:hidden 类不生效，不是你写错了，是 Tailwind 默认没启用 print 变体——它根本不会为 @media print 生成任何 CSS 规则。
必须在 tailwind.config.js 中显式注册 print 屏幕
Tailwind v3+ 不再默认注入 print 断点，必须手动添加。其他写法（如 print: 'print' 或省略 raw）全部无效：
-
raw: 'print'是唯一合法值，写成{ raw: 'print' } - 改完必须重启开发服务器（
npm run dev），热更新不触发重解析 -
content数组要覆盖所有含print:类的文件，比如./src/**/*.{js,ts,tsx}，漏掉.tsx就会被 PurgeCSS 清掉
print: 修饰符只支持有限工具类，别指望它生成分页规则
print:hidden、print:block 这类能用，但 print:break-before-page 完全无效——Tailwind 解析器直接忽略，不报错也不生成 CSS。
- 所有
break-相关属性（break-before、break-after、break-inside）都不在默认工具集中 - 它们只在打印上下文有意义，Tailwind 默认不为未声明的变体生成规则
- 想用分页控制，必须手写
@layer utilities注入，且同时提供page-break-before回退
分页失效的真正原因往往不在你写的类上
哪怕你正确写了 .break-before-page { break-before: page; page-break-before: always; }，它也可能静默失效：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow: hidden、transform或filter，会截断分页上下文 - 目标元素不是块级（
<div>、<code><section></section>），break-before: page对<span></span>无效 - Chrome 打印预览和真实打印机行为不一致，Safari 对
break-before支持弱，务必保留page-break-before: always - 把所有打印样式统一写在
@media print { }里，彻底隔离 - 用
link[media="print"]单独引入print.css，避免主样式膨胀 - 慎用
!important，仅用于覆盖第三方库内联样式或顽固默认值 - 测试时别只看 Chrome DevTools 的“打印预览”，务必导出 PDF 或用真实打印机验证分页和颜色
更稳妥的做法：直接用 @media print 块写原生规则
如果你项目已有打印逻辑，或需要精细控制（比如表格表头重复、链接加 URL、强制黑底白字），硬塞进 Tailwind 工具链反而增加不确定性：
最容易被忽略的不是怎么写，而是 DOM 结构本身——哪怕 @layer utilities 写得再规范，只要上层有个 overflow: hidden 的 <div>，<code>break-before: page 就彻底失效，且浏览器既不报错也不警告。
