Tailwind打印样式不生效，因v3+默认禁用print变体，需在tailwind.config.js的plugins中添加自定义print变体、重启服务，并确保content路径覆盖含print:类的文件，同时break-before等分页属性须手写@layer utilities实现。
打印样式不生效？先确认 @media print 是否被覆盖
Tailwind 默认不注入打印相关的 CSS，所有打印样式必须显式定义在 @media print 块中。如果你写了 print:hidden 却没效果，大概率是 CSS 加载顺序问题——比如你把自定义打印样式写在 Tailwind 的 @layer utilities 之后，而 Tailwind 的基础重置（如 body 的 margin）又没被打印媒体查询覆盖。
实操建议：
- 把所有打印相关类（如
print:block、print:hidden）统一放在@layer utilities内，并确保该层在 Tailwind 的@tailwind utilities之后引入 - 避免依赖第三方插件（如
@tailwindcss/forms）自动添加的打印规则，它们通常不生效 - 检查浏览器开发者工具的「Rendering」面板，勾选「Emulate CSS media type」→「print」，实时验证样式是否进入打印上下文
print: 变体默认不可用，需手动启用
Tailwind 3.0+ 默认禁用 print: 变体，即使你写了 print:hidden，编译后也不会生成对应 CSS。这不是 bug，是设计选择——防止无意识膨胀构建体积。
启用方法很简单，在 tailwind.config.js 的 variants（旧版）或 plugins（新版）中显式加入：
module.exports = {
content: [...],
theme: { ... },
plugins: [
require('@tailwindcss/typography'),
// 必须加这一行
({ addVariant }) => {
addVariant('print', '@media print')
}
]
}
注意：如果用了 purge（v2）或 content（v3），确保 HTML 或 JS 中真实出现了 print: 类名，否则会被 PurgeCSS 删除。
常见打印场景的实用组合
纯靠 print:hidden 和 print:block 往往不够。实际打印时最常遇到的是背景色丢失、链接变蓝、分页错乱、内容被截断等问题。
推荐直接复用的组合：
- 去除所有背景和边框：
print:bg-transparent print:border-0 - 让链接显示 URL：
print:text-black print:underline [&_a]:after:content-[attr(href)] [&_a]:after:ml-1 [&_a]:after:text-gray-600（需配合@layer utilities定义） - 强制分页控制：
print:break-before-page（对应page-break-before: always）、print:break-inside-avoid（防表格跨页断裂） - 隐藏导航栏/侧边栏但保留主内容：
print:hidden放在header和aside上，同时给main加print:block print:mx-0
字体、尺寸与颜色在打印中表现异常
浏览器打印引擎对 CSS 的支持比屏幕渲染保守得多。比如 rem 在某些打印机驱动里会缩放失真，font-smoothing 完全无效，bg-gradient-to-r 一律退化为纯色或透明。
稳妥做法：
- 打印专用字体优先用
print:font-sans，避免font-mono在部分打印机上无法嵌入 - 字号统一用
print:text-base起手，再局部调整；避免text-xs—— 打印出来可能看不清 - 颜色只用
print:text-black、print:text-gray-700等高对比度值；print:text-blue-500在黑白打印机下几乎不可读 - 图片打印前加
print:object-contain print:max-h-[20cm]，防止撑出纸张边界
最麻烦的其实是 PDF 导出行为：Chrome 的「另存为 PDF」和系统原生「打印 → 保存为 PDF」对同一套 CSS 的解析结果可能不同，必须真机打印测试两遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
