print:hidden 未生效是因为 Tailwind 默认禁用 print 变体，需在 tailwind.config.js 中通过插件显式启用 @media print；同时须重启开发服务器，并确认所用工具类支持该变体。
print:hidden 为什么没生效？检查变体是否启用
默认情况下，Tailwind 的 print: 变体是禁用的。即使你写了 print:hidden，构建后也不会生成对应 CSS 规则——浏览器自然不会响应。
必须在 tailwind.config.js 的 variants（v3+ 改为 plugins 配置）中显式开启：
module.exports = {
content: [...],
theme: { /* ... */ },
plugins: [
require('@tailwindcss/typography'),
// ✅ 必须加这一行才能用 print:*
require('tailwindcss/plugin')(({ addVariant }) => {
addVariant('print', '@media print');
})
],
}- v2 用户需在
variants数组里添加'print'到相关工具类（如display、visibility） - v3+ 推荐用插件方式，更可控；否则
print:hidden、print:block全都不起作用 - 改完配置务必重启 dev server 或重新构建，否则热更新不触发 CSS 重生成
哪些工具类支持 print: 变体？别硬套不兼容的
不是所有 Tailwind 工具类都默认支持 print:。比如 print:font-bold 能用，但 print:backdrop-blur 在打印媒体中根本无意义，Tailwind 也不会生成它。
常用且实际有效的组合包括：
立即学习“前端免费学习笔记（深入）”；
-
print:hidden/print:block/print:flex—— 控制元素显隐与布局流 -
print:text-black/print:bg-white—— 强制去除彩色背景和灰字，提升可读性 -
print:p-0/print:my-0—— 清除页边距、段间距，避免内容被截断 -
print:page-break-before/print:page-break-after—— 对应原生 CSS 的break-before，控制分页（注意：部分浏览器仅支持旧语法page-break-before）
如果某个类加了 print: 却没效果，先查文档确认该工具类是否在 corePlugins 中启用，再确认变体插件已正确注册。
打印样式调试难？绕过浏览器“静默打印”限制
Chrome 和 Edge 默认用“静默打印”模拟视图（Ctrl+P → “打印预览”），但这个预览常忽略部分 @media print 行为，比如背景色是否显示、分页是否准确。
真正可靠的调试方式是：
- 在 DevTools 的 Rendering 面板中勾选
Emulate CSS media type→ 选print，实时看 DOM 样式变化 - 用
window.matchMedia('print').matches在 Console 中手动验证当前是否命中 print 媒体 - 临时加一段内联样式：
<style>@media print { body { border: 2px solid red !important; } }</style>，快速确认环境是否就绪
特别注意：Tailwind 的 print:bg-white 在打印预览里可能仍显示灰色背景——这是因为 Chrome 默认关闭“背景图形”，需在打印设置里手动勾选“背景图形”才生效。
复杂页面分页错乱？优先用 break-inside: avoid
打印时表格、卡片列表常被硬生生从中间劈开，阅读体验极差。CSS 的 page-break-inside: avoid（或现代等价的 break-inside: avoid）是解法，但 Tailwind 默认不提供对应工具类。
推荐两种轻量补救方式：
- 在需要防断页的容器上加
print:[break-inside:avoid]（v3.3+ 支持任意值 JIT） - 或在 config 中扩展一个工具类：
theme: { extend: { typography: { DEFAULT: { css: { 'h1, h2, h3': { 'break-after': 'avoid' }, '.card': { 'break-inside': 'avoid' } } } } } }
不要依赖 print:page-break-before 给每个区块强行分页——这容易导致大量空白页，尤其在动态内容长度不确定时。
最易被忽略的是：打印样式表的加载时机。如果用 <link rel="stylesheet" media="print"> 单独引入，务必确保它在 Tailwind 主 CSS 之后加载，否则工具类会被覆盖。
