print:hidden不生效是因为Tailwind v3+默认禁用print变体，须在tailwind.config.js的screens中添加print:{raw:'print'}、重启开发服务器，并确保content路径覆盖所有含该类的文件；break-before等分页属性需手写@layer utilities实现。
print:hidden 不生效？先确认 tailwind.config.js 是否启用 print 变体
直接写 print:hidden 却没效果，不是语法错，是 Tailwind 根本没为 @media print 生成任何 CSS。v3+ 默认禁用该变体，必须手动开启。
在 tailwind.config.js 中添加以下配置（注意是 plugins，不是旧版的 variants）：
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
screens: {
print: { raw: 'print' },
},
},
},
plugins: [
// 确保插件支持 print，例如 @tailwindcss/forms v0.5+ 已内置
],
}
- 改完必须重启开发服务器（
npm run dev），热更新不重读配置 -
content路径需覆盖所有含print:类的文件，漏掉.tsx就会被 PurgeCSS 清掉 -
raw: 'print'是唯一合法写法，print: 'print'或省略raw都无效
为什么 print:block 和 hidden print:block 行为完全不同
类名顺序和上下文决定最终表现，不是简单叠加。Tailwind 编译后生成的是独立的 @media print 规则块，不与屏幕样式做层叠计算。
-
hidden print:block→ 先应用display: none（屏幕下隐藏），再在@media print中覆盖为display: block，结果：屏幕不可见、打印可见 -
print:hidden→ 仅在@media print中生效，屏幕下完全不受影响 - 若父容器有
hidden或overflow: hidden，子项的print:block仍无法显示——媒体查询不解除祖先限制
分页控制不能靠 print:break-before-page
Tailwind 不支持 print:break-before-page 这类写法，解析器直接忽略，不会生成任何 CSS。分页属性（break-before、break-after、break-inside）不在默认工具集中。
必须手写注入，推荐放在 @layer utilities 中，并兼容旧引擎：
@layer utilities {
.break-before-page {
break-before: page;
page-break-before: always;
}
}
- 目标元素必须是块级（
<div>、<code><section></section>），<span></span>上加无效 - 父容器不能有
transform、overflow: hidden或filter，否则分页上下文被静默截断 - Chrome 打印预览和真实打印机输出不一致，Safari 对
break-before支持弱，page-break-before: always更稳妥 - 打印时浏览器无视视口宽度，所有响应式断点失效
- 字体单位优先用
pt（如text-[12pt]）或cm，rem/em在不同 DPI 打印机上缩放不可控 - 背景色、图片默认不打印（Chrome/Firefox 均如此），靠
print:bg-white没用，得靠print:text-black或内联style="color: #000"强制 - 表格列宽异常？
print:w-full对<td> 无效，改用 <code>print:table-column或style="width: auto"最常被忽略的不是怎么写，而是 DOM 结构本身——哪怕你
@layer写得再规范，只要上层有个overflow: hidden的<div>，<code>break-before-page就彻底静默失效，且浏览器不报错、不警告。
避免用断点类（如 md:text-lg）控制打印样式
md:、lg: 等断点只对 @media screen 有效，在 @media print 中完全不触发。硬套进去等于白写。
