tailwind 中 print 类无效的主因是未在 tailwind.config.js 的 screens 中声明 print: { raw: 'print' }，且需重启开发服务器；content 路径须覆盖含 print 类的文件；浏览器打印默认禁用背景等样式；分页控制需手写 @layer utilities 类，不可用 print: 修饰符。
tailwind.config.js 里没注册 print 屏幕
print:hidden 这类类名写得再对也没用，因为 Tailwind 根本没生成对应的 @media print 规则。v3+ 默认不启用打印变体，必须手动在 screens 中声明：
-
print: { raw: 'print' }是唯一有效写法；print: 'print'或print: { media: 'print' }都不会生效 - 改完配置后必须重启开发服务器（
npm run dev），热更新不会重读tailwind.config.js - 如果项目用了插件（比如
@tailwindcss/typography），检查它是否覆盖了screens配置
content 路径没覆盖到含 print: 类的文件
Tailwind 的 PurgeCSS 机制只扫描 content 数组里匹配到的源码字符串。漏配路径 = 类被直接删掉：
-
./src/**/*.{js,ts}不会匹配.tsx或.vue文件，得显式加上：./src/**/*.{js,ts,tsx,jsx,vue} - HTML 模板（如
public/index.html）也得包含：./public/**/*.html - 第三方 UI 库若用了
print:类（比如 DaisyUI），其源码路径也要加进content
浏览器打印预览里看不到背景色和图片
这不是 Tailwind 的问题，而是浏览器规范行为：默认禁用 background-color、background-image 和 box-shadow 等渲染效果。
-
print:bg-white在预览里照样没白底；想强制显示需加-webkit-print-color-adjust: exact，但仅 Chrome/Edge 支持，Firefox/Safari 忽略 - 更稳妥的做法是换视觉表达：用
print:border、print:text-gray-700或print:underline - 别依赖
:hover、:focus等伪类——打印是静态快照，:not(:hover)会恒为真，可能意外隐藏内容
分页控制不能用 print: 修饰符
print:break-before-page 这种写法完全无效。Tailwind 解析器不识别该变体，也不会生成任何对应 CSS。
- 所有分页相关属性（
break-before、break-after、break-inside）都得手写，且要兼顾兼容性： - 推荐在
@layer utilities里定义：@layer utilities { .page-break-before { break-before: page; } .page-break-inside-avoid { break-inside: avoid; } } - 注意：这些类名本身不带
print:前缀，但你可以在 HTML 中组合使用：class="print:hidden page-break-before"
最常被忽略的一点：调试时别靠 Ctrl+P 反复刷新打印预览。Chrome/Edge 的 DevTools Rendering 面板提供实时 print 媒体模拟，能立刻看到样式是否真正注入，比真打更准更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
