print:hidden不生效是因为Tailwind v3+默认禁用print变体，必须在tailwind.config.js的theme.extend.screens中显式添加print: { raw: 'print' }、重启开发服务器，并确保content路径覆盖所有含该类的文件。
print:hidden 不生效，不是你写错了，是 Tailwind 默认根本没生成 @media print 规则——v3+ 版本起，print: 变体被完全禁用，必须手动启用，否则所有带 print: 前缀的类（比如 print:block、print:font-mono）都不会出现在最终 CSS 中。
必须在 tailwind.config.js 中显式注册 print 屏幕
只有这一种写法有效：print: { raw: 'print' }，且必须放在 theme.extend.screens 里。其他写法如 print: 'print'、print: { media: 'print' } 或 print: { size: 'print' } 全部无效。
- 改完配置后必须重启开发服务器（
npm run dev），热更新不会重读tailwind.config.js - 若项目用了
@tailwindcss/typography等插件，检查它们是否覆盖了screens配置 - 多个插件共存时，建议把
print配置放在最后，避免被覆盖
content 路径漏一个文件，print 类就消失一个
Tailwind 的 PurgeCSS 机制只扫描 content 数组中 glob 匹配到的源码字符串。哪怕你在 public/index.html 里写了 class="print:hidden"，只要 content 没包含 ./public/**/*.html，这个类就会被直接删掉。
-
./src/**/*.{js,ts}不会匹配.tsx或.jsx，得显式补全为./src/**/*.{js,ts,tsx,jsx} - Vue/Svelte 组件、MDX、.astro 文件同理，扩展名一个都不能少
- 第三方 UI 库（如 DaisyUI）若内部用了
print:类，其源码路径也要加进content
break-before: page 不能靠 print: 修饰符实现
print:break-before-page 是无效写法——Tailwind 解析器根本不识别该变体，也不会报错或警告，它直接跳过，什么也不生成。
立即学习“前端免费学习笔记（深入）”；
- 必须手写：
@layer utilities中定义.break-before-page，并同时兼容现代标准和旧版回退 - 目标元素必须是块级（
<div>、<section>），<span>上加了也无效 - 父容器若有
overflow: hidden、transform或filter，会静默破坏分页上下文，加了也白加
浏览器打印预览 ≠ 实际输出，DOM 结构比 CSS 更关键
Chrome 打印预览和真实打印机行为不一致，Safari 对 break-before 支持弱，务必导出 PDF 或真机测试。最常被忽略的不是怎么写 CSS，而是祖先元素的样式：哪怕你 @layer 写得再规范，只要上层有个 overflow: hidden 的 <div>，break-before: page 就彻底失效，且浏览器不报错、不警告。
