Tailwind 的 print: 类默认不生效，需手动启用 print 屏幕、重启服务、确保 content 路径覆盖所有含 print: 的文件，且复杂打印逻辑应优先使用原生 @media print 块管理。
Tailwind 的 print: 类默认不生效，不是你写错了，是它根本没被编译进 CSS —— 必须手动启用、重启、覆盖路径，三者缺一不可。
tailwind.config.js 必须显式注册 print 屏幕
v3+ 版本默认禁用所有打印相关变体。即使写了 print:hidden，只要配置里没声明 print，构建时就完全忽略。
-
raw: 'print'是唯一合法写法；print: 'print'或media: 'print'都无效 - 必须加在
theme.extend.screens下，例如：module.exports = { theme: { extend: { screens: { print: { raw: 'print' }, }, }, }, } - 改完立刻重启开发服务器（
npm run dev），热更新不会重读配置 - 若用了插件（如
@tailwindcss/typography），确认它没覆盖screens配置
content 路径必须覆盖所有含 print: 类的文件
Tailwind 的 PurgeCSS 机制只扫描 content 数组里 glob 匹配到的源码字符串。漏掉一个扩展名，对应类就会被删光。
-
./src/**/*.{js,ts}不会匹配.tsx或.vue；得写成./src/**/*.{js,ts,tsx,jsx,vue} - HTML 模板（如
public/index.html）也要显式加入：./public/**/*.html - 第三方 UI 库（如 DaisyUI）若用了
print:类，其源码路径也得加进content - 检查构建后 CSS 文件里是否真有
@media print块，没有就说明路径漏了
分页、背景、表格表头等关键行为不能靠 print: 修饰符
Tailwind 解析器根本不支持 print:break-before-page、print:bg-white 这类写法——它们会被静默跳过，不报错也不生成规则。
立即学习“前端免费学习笔记（深入）”；
-
break-before: page必须手写：@layer utilities { .print-page-break { break-before: page; page-break-before: always; } } - 浏览器默认禁用背景色和图片；
print:bg-white在预览里永远不显示，得加-webkit-print-color-adjust: exact（仅 Chrome/Edge 支持） - 表格跨页时
<thead>不自动重复，必须用@media print单独写thead { display: table-header-group; } - 父容器若有
overflow: hidden或filter，会直接破坏分页上下文，break-before彻底失效且无提示
更稳妥的方案：用原生 @media print 块统一管理
如果你的打印逻辑稍复杂（比如隐藏导航、重设字体、强制黑底白字、补全 URL 后缀），硬塞进 Tailwind 工具链反而容易失控。
- 把所有打印样式集中写在
@media print { }里，避免和@layer components或第三方样式冲突 - 用
!important只在必要场景覆盖内联样式或顽固库默认值（比如某些 UI 组件的style="display: flex"） - 测试时别只信 Chrome DevTools 的“打印预览”——Safari 对
break-before支持弱，真实 PDF 导出或物理打印机才反映最终效果 - 最常被忽略的不是怎么写 CSS，而是 DOM 结构本身：哪怕
@layer utilities写得再规范，只要上层有个overflow: hidden的<div>，break-before: page就彻底失效
