print:hidden默认不生效是因为Tailwind未启用print变体，需在tailwind.config.js的theme.extend.screens中添加print:{raw:'print'}，并重启开发服务器，同时确保content路径覆盖所有含该类的文件。
Tailwind 的 print: 修饰符默认不生效，不是你写错了，而是它根本没被启用——构建时不会生成任何 @media print 规则，浏览器自然无视。
tailwind.config.js 必须显式声明 print 屏幕
即使写了 print:hidden，只要配置里没注册 print 这个 screen，Tailwind 就当它不存在。v3+ 不再默认注入打印规则，必须手动加进 screens 扩展里：
module.exports = {
theme: {
extend: {
screens: {
print: { raw: 'print' },
},
},
},
}
-
raw: 'print'是关键，不能写成print: 'print'或省略raw - 改完必须重启开发服务器（
npm run dev），热更新不触发 Tailwind 配置重解析 - 如果项目用了自定义插件（如
@tailwindcss/typography），确认它们没覆盖或重置screens
content 路径漏掉 .html 或 .tsx 文件会导致 print 类丢失
Tailwind 只扫描 content 数组里 glob 匹配到的源码字符串。如果你在 public/index.html 里写了 class="print:hidden"，但 content 没包含 ./public/**/*.html，这个类就会被 PurgeCSS 当作“未使用”删掉。
- 检查
tailwind.config.js中的content是否覆盖全部模板文件：HTML、TSX、Vue、Svelte 等扩展名要一一列出 - 常见漏配：
./src/**/*.{js,ts}不会匹配.tsx，得写成./src/**/*.{js,ts,tsx} - 第三方 UI 库（如 DaisyUI）若用到了
print:类，其源码路径也得加进content，否则构建后照样消失
print:hidden 生效但内容仍显示？检查是否被其他 CSS 覆盖
print:hidden 编译后是 @media print { .print\:hidden { display: none; } }，但它可能被更高优先级的规则干掉：
立即学习“前端免费学习笔记（深入）”；
- 全局
@layer base里写了body { display: block !important; }？!important会压过print:hidden - 父容器用了
print:flex但子元素print:hidden没生效？Flex 容器下display: none依然有效，但要确认没有visibility: visible或opacity: 1类强行透出 - Chrome 打印预览里右键「检查」看到的样式，必须切换到「print」媒体类型才能真实反映打印渲染逻辑
分页和 break-before 不支持 print: 前缀
Tailwind 解析器不识别 print:break-before-page，这类属性必须手写 CSS：
@media print {
.page-break-before {
break-before: page;
page-break-before: always;
}
}
- 别指望
print:break-before或print:page-break-before能工作，它们不会出现在最终 CSS 中 - 手写规则时记得重置可能干扰分页的属性：
transform: none !important、filter: none !important，否则某些布局会卡在页中不动 - 表格跨页断裂？
print:修饰符完全不管这个，得靠@media print table { break-inside: avoid; }这类原生规则
最常被忽略的一点：启用 print screen 后，所有已有的 screen: 类（比如 screen:hidden）并不会自动反向生效——你得自己配对写，或者用 screen-only/print-only 这类组合类来控制显隐边界。
