Tailwind 的 print 样式未生效是因为默认禁用 print 变体，需在 tailwind.config.js 的 screens 中显式配置 print: { raw: 'print' }，重启开发服务器，并确保 content 覆盖相关文件；CDN 版本不支持任何变体，break-before 等需手写 @layer utilities；DOM 结构中父级 overflow: hidden 会静默破坏分页。
Tailwind 的打印样式没生效，不是你写错了类名，而是它根本没生成对应的 @media print CSS 规则——默认压根不启用 print: 变体。
print:hidden 为什么编译不出 CSS
你在 HTML 里写了 print:hidden，但 DevTools 的 Styles 面板里搜不到任何 @media print 下的 display: none 规则。这是因为 Tailwind v3+ 默认禁用所有 print: 工具类变体，连 print:block、print:text-sm 都不会生成。
- 必须在
tailwind.config.js的screens里显式注册：print: { raw: 'print' }（注意：不能写成print: 'print'，也不能省略raw） - 改完配置后，必须重启开发服务器（
npm run dev），热更新不重新解析tailwind.config.js - 确认
content数组覆盖了所有含print:类的文件，比如./src/**/*.{js,ts,tsx}；漏掉.tsx就会被 PurgeCSS 删光
break-before: page 无法用 print: 前缀
你写了 print:break-before-page，但浏览器完全无视——Tailwind 根本没注册这个变体，解析器直接跳过，也不报错。
-
break-before: page和page-break-before: always必须手写，推荐用@layer utilities注入： @layer utilities { @media print { .break-before-page { break-before: page; page-break-before: always; } } }- 该规则只对块级元素生效；若加在
<span>或其他 inline 元素上，无效 - 父容器若有
overflow: hidden、filter或transform，会静默破坏分页上下文——加了也白加，且无任何提示
CDN 版本根本不支持 print 变体
如果你用的是 https://cdn.tailwindcss.com，那 print:hidden 永远不会生效。
立即学习“前端免费学习笔记（深入）”；
- CDN 版本是预构建的极简包，只包含约 3200 个高频静态工具类，不支持任何变体前缀（包括
md:、dark:、print:） - 它也不扫描 JS 字符串或动态拼接的类名，哪怕你硬写
print:hidden在 HTML 里，也不会被识别 - 开发阶段务必用 npm + PostCSS 方案；CDN 仅适合原型演示或纯静态页面
最常被忽略的不是怎么写 @media print，而是 DOM 结构本身：哪怕你 @layer utilities 写得再规范，只要上层有个 overflow: hidden 的 <div>，break-before: page 就彻底失效，浏览器既不渲染也不报错。
