Tailwind打印样式失效主因是未启用print变体且未在@media print中声明规则；需在tailwind.config.js中显式配置print变体、确保content覆盖相关文件，并用border等替代背景色实现打印效果。
Tailwind CSS 的样式在打印预览里“消失”，不是类没生成，而是浏览器压根不执行那些 CSS —— 因为它们没写在 @media print 作用域内。
为什么 @media print 必须显式写，不能靠默认或 @media all
浏览器只认标准媒体查询语法。你写的 @media screen、@media (min-width: 768px)，甚至没声明媒体类型的普通 CSS，在打印上下文里全被忽略。哪怕你用了 hidden、print:hidden 这类工具类，只要它没落在 @media print 块里，就等于没写。
-
@media all不是“通吃”，它只是表示“适用于所有媒体类型”，但打印引擎仍会跳过未显式声明print的规则 - Tailwind 默认不把任何工具类注入
@media print，包括hidden、flex、bg-white—— 它们只存在于普通样式流中 - 你在 Chrome 打印预览里看到的页面，是浏览器用一套独立的渲染通道处理的，和屏幕渲染完全隔离
如何启用 Tailwind 的 print: 变体
Tailwind v3.0+ 支持 print: 前缀，但默认关闭。它不会自动生效，必须手动配置。
- 检查
tailwind.config.js中是否启用了print变体：module.exports = { content: [...], theme: { ... }, variants: { extend: { display: ['print'], flexDirection: ['print'], backgroundColor: ['print'], // 至少加这几个常用项，否则 print:flex 会失效 } }, plugins: [] } - 如果你用的是 v3.3+，推荐改用
plugins方式（更稳定）：const plugin = require('tailwindcss/plugin') module.exports = { // ... plugins: [ plugin(function ({ addUtilities }) { addUtilities({ '.print\:hidden': { 'display': 'none' }, '.print\:block': { 'display': 'block' }, '.print\:flex': { 'display': 'flex' }, }, { variants: ['print'] }) }) ] } - 配置完必须重启开发服务器（
npm run dev），否则新变体不会进构建流程
打印时背景色/边框不显示？别用 bg-，改用 border
浏览器默认禁用背景图和背景色打印，这是硬性限制，print:bg-white 写了也白搭。
立即学习“前端免费学习笔记（深入）”；
- 要模拟“色块”，用
print:border-t-4 print:border-blue-500替代print:bg-blue-500 - 要画一条横线，别写
print:h-px print:bg-gray-300，改用print:border-b print:border-gray-300 - 字体颜色不受影响，
print:text-gray-700可正常生效 - 如果真要强制打印背景，只能靠用户手动在浏览器打印设置里勾选“背景图形”——不可控，不推荐依赖
content 配置漏掉 .html 或 JS 模板，print: 类照样消失
即使你正确启用了 print 变体，如果 tailwind.config.js 的 content 字段没扫到实际使用 print:flex 的文件，这个类名根本不会被打包进 CSS 文件。
- 确认路径是否覆盖真实模板位置：比如 Nuxt 项目通常在
app.vue或layouts/default.vue里写print:hidden，那content就得包含./app.vue和./layouts/**/*.vue - JSX/TSX 中动态拼接的打印类（如
className={`print:${isPrint ? 'block' : 'hidden'}`}）必须确保该文件被content扫到，否则 PurgeCSS 会直接删掉print:block - 临时验证方法：注释掉
content数组，跑一次 build，如果打印样式回来了，问题 100% 出在这里
最常被忽略的一点：打印样式生效的前提，是你得让浏览器进入打印上下文 —— 在开发时反复刷新页面没用，必须点“打印预览”（Ctrl+P / Cmd+P），看的是那个独立视图里的渲染结果。
