Tailwind 默认不生成 print 媒体规则，需在 tailwind.config.js 的 theme.extend.screens 中显式配置 print: { raw: 'print' } 并重启开发服务器；content 路径必须覆盖所有含 print 类的文件，否则类被 PurgeCSS 删除；break-before 等分页属性不支持 print: 修饰符，须手写 @layer utilities 或原生 @media print；DOM 结构（如 overflow: hidden）会静默破坏分页。
print:hidden 类写得再对也没用——Tailwind 默认不生成任何 @media print 规则，你看到的“失效”，其实是 CSS 根本没编译出来。
tailwind.config.js 必须显式注册 print 屏幕
v3+ 版本起，print: 变体被完全禁用。不手动加，所有带 print: 前缀的类（如 print:hidden、print:block）都不会出现在最终 CSS 中。
- 只有一种写法有效：
print: { raw: 'print' }，放在theme.extend.screens里 -
print: 'print'、print: { media: 'print' }、甚至print: { size: 'print' }全部无效 - 改完必须重启开发服务器（
npm run dev），热更新不会重读配置 - 若项目用了
@tailwindcss/typography等插件，确认它们没覆盖screens配置
content 路径漏一个文件，print 类就消失一个
Tailwind 的 PurgeCSS 机制只扫描 content 数组里 glob 匹配到的源码字符串。哪怕你在 public/index.html 里写了 class="print:hidden"，只要 content 没包含 ./public/**/*.html，这个类就会被直接删掉。
- 常见漏配：
./src/**/*.{js,ts}不会匹配.tsx或.jsx，得显式补全 - 第三方 UI 库（比如 DaisyUI）若用了
print:类，其源码路径也要加进content - Vue/Svelte 组件、MDX 文件同理，扩展名一个都不能少
break-before: page 这类分页控制不能靠 print: 修饰符
print:break-before-page 是无效写法。Tailwind 解析器根本不识别该变体，也不会报错或警告——它直接跳过，什么也不生成。
立即学习“前端免费学习笔记（深入）”；
- 必须手写：
@layer utilities里定义.page-break-before { break-before: page; } - 同时兼容旧浏览器：加上
page-break-before: always回退 -
break-before: page只对块级元素生效；父容器若有overflow: hidden、transform或filter，会静默破坏分页上下文 - Chrome 打印预览和真实打印机行为不一致，Safari 对
break-before支持弱，务必导出 PDF 或真机测试
别硬塞打印逻辑进 Tailwind 工具链
如果你的打印需求稍复杂（比如隐藏导航、重设字体单位、强制黑底白字、URL 后缀、表格表头跨页重复），直接写原生 @media print 更可靠。
- 把所有打印相关样式统一写在
@media print { }块里，避免和@layer components或第三方插件冲突 - 用
!important覆盖顽固内联样式或第三方库默认值，但仅限必要场景 - 浏览器默认禁用背景色和图片打印，
-webkit-print-color-adjust: exact仅 Chrome/Edge 支持，Firefox/Safari 忽略，更稳妥的是换视觉表达（如用print:border或print:text-black）
最常被忽略的不是怎么写 CSS，而是 DOM 结构本身——哪怕你 @layer 写得再规范，只要上层有个 overflow: hidden 的 <div>，break-before: page 就彻底失效，且浏览器不报错、不警告。
