tailwind 不支持 print: 修饰符生成 break-before: page 等打印分页样式，因其未内置该变体；需手动通过 @layer utilities 注入 .break-before-page 并兼容 page-break-before，且确保目标为块级元素、父容器无 transform/overflow:hidden。
Tailwind 不支持 print: 修饰符直接生成 break-before: page 这类打印专用 CSS，你写 print:break-before-page 完全不会生效——它根本没注册这个变体。
为什么 print: 修饰符对分页控制无效
Tailwind 的 print: 变体只作用于它已内置的工具类（比如 print:hidden、print:block），而所有与分页相关的属性（break-before、break-after、break-inside）都不在默认工具集中。原因很实际：
- 这些属性只在
@media print中有意义，屏幕下完全无用，Tailwind 默认不为 print 媒体生成“未显式声明”的规则 -
break-before: page行为严重依赖 DOM 结构：父容器不能有overflow: hidden、transform或filter，否则整个分页上下文被截断，加了也白加 - Chrome 打印预览和真实打印机输出表现不一致，Safari 对
break-before支持弱，仍需回退page-break-before
如何安全添加 break-before-page 类
必须手动注入，推荐用 @layer utilities，并同时覆盖现代标准和旧版回退：
@layer utilities {
.break-before-page {
break-before: page;
page-break-before: always;
}
.break-before-avoid {
break-before: avoid;
page-break-before: avoid;
}
}
- 目标元素必须是块级（
<div>、<code><section></section>），<span></span>或 inline 元素上加无效 - 避免放在
@layer components里——容易被其他样式覆盖或干扰 - 如果项目已有打印专用样式表，更稳妥的做法是把这类规则单独写在
@media print { ... }块内，彻底隔离
配置 print 断点用于响应式显示控制
如果你想用 print:hidden 这类真正受支持的修饰符，需要先在 tailwind.config.js 中显式声明 print 屏幕：
module.exports = {
theme: {
extend: {
screens: {
print: { raw: 'print' },
},
},
},
}
- 之后才能使用
print:hidden、print:flex等工具类 - 注意：这些只控制显隐/布局，不触发分页；分页仍需手写
break-before - 不要指望
print:break-before-page能工作——Tailwind 解析器会直接忽略它
最容易被忽略的点是父容器的层叠上下文：哪怕你手写了正确的 break-before-page，只要它的某个祖先元素带 transform 或 overflow: hidden，分页就会静默失效，且没有任何报错提示。
