print:hidden 不生效主因是 tailwind v3+ 默认禁用 print 变体，需在 tailwind.config.js 的 plugins 中手动注册 print 变体并重启开发服务器，且仅部分工具类（如 hidden、block、text-black）支持该变体。
print:hidden 类不生效，基本可以断定是变体没启用，而不是写法或浏览器问题。
tailwind.config.js 必须显式注册 print 变体
Tailwind v3+ 默认禁用 print: 变体，哪怕你写了 print:hidden，构建后也不会生成对应 CSS 规则。必须手动加插件注册：
- 在
plugins数组里加入require('tailwindcss/plugin')(({ addVariant }) => { addVariant('print', '@media print'); }) - 不要只加
@tailwindcss/typography——它不启用print: - v2 用户需在
variants里为visibility、display等单独开'print'，但 v3+ 强烈建议用插件方式 - 改完配置后必须重启开发服务器（
npm run dev或pnpm dev），热更新不会重新生成媒体查询 CSS
不是所有工具类都支持 print: 变体
Tailwind 不会为无意义的打印场景生成规则，比如 print:backdrop-blur 或 print:animate-pulse 直接被忽略。实际可用的组合有限：
-
print:hidden/print:block/print:flex—— 控制显隐与布局流，安全可靠 -
print:text-black/print:bg-white—— 去除彩色背景和灰字，提升可读性 -
print:p-0/print:my-0—— 清除页边距，避免内容被截断 -
print:page-break-before不行 —— Tailwind 解析器不识别这个语法；得手写break-before: page或用@layer utilities封装
打印预览不可信，真机调试才准
Chrome 和 Edge 的“打印预览”（Ctrl+P）常静默忽略部分 @media print 行为，比如背景是否显示、分页是否准确。真正有效的调试方式只有两种：
- 用真实打印机执行物理打印（哪怕只打一页）
- 导出为 PDF（在打印对话框中选“另存为 PDF”），再检查输出效果
- 注意：父级元素带
transform或overflow: hidden会静默破坏分页，且没有任何控制台报错
最常被忽略的是变体注册后未重启服务，以及误以为 print: 能覆盖所有工具类——它只对语义合理、且已在 corePlugins 中启用的类生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
