CSS框架打印支持有限，需手动启用并覆盖样式：Bootstrap的d-print-*类仅控制display且范围窄；Tailwind需显式开启print变体；BEM修饰符须在@media print中重写；分页、表格表头重复、字体单位等需手写规则。
CSS 框架本身不自动适配打印样式，必须显式启用、手动覆盖、分层控制——靠框架默认行为基本没用。
Bootstrap 的 d-print-* 类只在 @media print 下生效，但覆盖范围极窄
Bootstrap 5 提供了 d-print-none、d-print-block 等工具类，但它们仅在 @media print 块内定义，且只处理 display 属性。它不重置字体单位、不清理 flex 布局、不干预表格跨页、也不处理深色模式下的反色问题。
- 必须确保你的 HTML 中已加载 Bootstrap 的 print CSS（通常是
bootstrap.min.css附带，非独立文件） -
d-print-none在屏幕下完全无效，不能用来做“响应式隐藏” - 遇到
.card里嵌套.row时，display: flex在打印中会崩坏，需额外加.row { display: block !important; } - 不要指望
d-print-none能安全隐藏导航栏：若该元素同时有.navbar和.d-print-none，而框架的.navbar样式权重更高，就可能失效
Tailwind 需手动开启 print: 变体，否则 print:hidden 不生成
Tailwind 默认禁用 print: 变体，即使写了 print:hidden，构建后 CSS 里也不会出现对应规则。
- 检查
tailwind.config.js是否在variants或plugins中启用了print，例如：variants: ['responsive', 'print'] - 旧版 Tailwind（v2.x）用
variants；v3+ 用plugins: [require('@tailwindcss/forms')]并确认插件支持 print -
print:hidden编译后生成的是@media print { .print\:hidden { display: none; } }，但若父容器用了flex，子项display: none可能导致布局塌陷 - 慎用
print:invisible：它保留占位空间，打印时可能撑出空白页
BEM 修饰符不能和 @media print 耦合，但可正交复用
BEM 修饰符（如 button--primary）是静态类名，浏览器不识别 button--primary@print 这种写法——语法非法，直接失效。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是在
@media print块里重写修饰符样式，例如：.button--primary { background-color: #007bff; } @media print { .button--primary { background-color: #000 !important; } } - 避免抽象出
card--print-layout这类类名：它只在打印时有意义，却污染组件语义，且 JS 控制类名逻辑会变脆弱 - 对纯装饰性修饰符（如
icon--small），可在@media print中直接设display: none，无需新增类 - 注意优先级：打印样式中尽量用更具体的选择器，比如
.print-ready .card--highlight，而非泛泛的.card--highlight
框架提供的打印类无法解决分页、表格表头重复、字体单位等真实痛点
所有主流 CSS 框架的打印支持都停留在“基础 display 重置”，而实际打印场景中最常卡住的是分页断裂、表格跨页、字号 DPI 偏差这些底层问题。
- 框架不处理
thead在跨页时自动重复：必须手写thead { display: table-header-group; } - 框架不干预
@page规则：它必须平级声明（不能嵌套在@media print里），且@page { size: A4; margin: 1cm; }才真正起效 - 框架默认用
rem或px，但打印推荐用pt（如font-size: 12pt），否则在不同 DPI 打印机上字号偏差明显 - 框架几乎从不处理链接可见性：需单独加
a::after { content: " (" attr(href) ")"; }，且要确保a元素未被display: none掩盖
最易被忽略的点是：框架的打印类只管“要不要显示”，不管“怎么显示得像一张纸”。你得亲手重写排版逻辑、分页规则、字体单位和颜色模型——框架只是起点，不是终点。
