tailwind 的 print:hidden 类不生效，是因为默认未生成 @media print 规则，必须在 tailwind.config.js 的 screens 中显式添加 print: { raw: 'print' }，并确保 content 路径覆盖所有含 print: 类的文件，重启开发服务器后才生效。
print:hidden 类不生效，不是你写错了，而是 Tailwind 根本没生成它对应的 @media print 规则 —— 默认配置下，所有工具类都只存在于屏幕样式流里。
tailwind.config.js 必须显式注册 print 屏幕
Tailwind v3.0+ 不再默认注入打印相关规则，print: 修饰符要起作用，必须手动把 print 加进 screens 扩展里。写错格式或漏掉这步，后续全白搭。
- 正确写法（
raw: 'print'是关键）：module.exports = { theme: { extend: { screens: { print: { raw: 'print' }, }, }, }, } - 错误写法：
print: 'print'、print: { media: 'print' }、或直接省略raw字段 - 改完必须重启开发服务器（
npm run dev），热更新不会重读配置 - 如果项目用了插件（如
@tailwindcss/typography），确认它没覆盖screens配置
content 路径必须覆盖所有含 print: 类的文件
Tailwind 的 PurgeCSS 机制会扫描 content 数组里匹配到的源码字符串，找不到就当“未使用”，直接删掉对应 CSS。哪怕配置对了，路径漏配也会导致 print:hidden 消失。
- 常见漏配：
./src/**/*.{js,ts}不会匹配.tsx或.vue文件，得写成./src/**/*.{js,ts,tsx,jsx,vue} - HTML 模板也得包含：比如
./public/**/*.html，否则class="print:hidden"在 index.html 里就无效 - 检查方式：临时在任意 JS 文件里写个
console.log('print:block')，看构建后 CSS 是否含@media print {.print\:block{display:block}}
@media print 下背景色默认不渲染
浏览器打印引擎默认禁用背景色和图片 —— 这是规范行为，不是 Tailwind 的锅。哪怕你写了 print:bg-white，打印预览里照样看不见白底。
- 替代方案：用
print:border或print:text-gray-700做视觉区分 - 强制显示背景（慎用）：
print:bg-white需搭配-webkit-print-color-adjust: exact，但仅 Chrome/Edge 支持，Firefox 和 Safari 忽略 - 别依赖
hover、focus等伪类：打印是静态快照，a:hover全部失效，:not(:hover)反而恒为真，容易误删内容
调试时要用 DevTools 的 print 模拟模式
不能靠 Ctrl+P 切换预览反复刷新，效率低还容易忽略样式是否真正注入。Chrome 和 Edge 的 Rendering 面板提供实时模拟，比真打更准更快。
- 打开 DevTools → ⚙️ Settings → Rendering → Emulate CSS media → 选
print - 此时页面立即应用所有
@media print规则，包括你刚加的print:hidden - 如果模拟后仍没效果，说明配置或 content 路径有问题；如果有效但 Ctrl+P 不行，可能是浏览器打印设置里勾了“背景图形”关闭项
最常被忽略的是 raw: 'print' 这个字段 —— 它不是可选项，是硬性要求。少一个字母，整个打印体系就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
