tailwind 默认不启用 print 变体，需在 tailwind.config.js 中显式添加 raw: 'print' 并重启服务；print 修饰符仅支持基础工具类，分页控制须手写 @layer utilities 或直接使用 @media print 原生规则。

print:hidden 类不生效，不是你写错了，是 Tailwind 默认没启用 print 变体——它根本不会为 @media print 生成任何 CSS 规则。

必须在 tailwind.config.js 中显式注册 print 屏幕

Tailwind v3+ 不再默认注入 print 断点，必须手动添加。其他写法（如 print: 'print' 或省略 raw）全部无效：

• raw: 'print' 是唯一合法值，写成 { raw: 'print' }
• 改完必须重启开发服务器（npm run dev），热更新不触发重解析
• content 数组要覆盖所有含 print: 类的文件，比如 ./src/**/*.{js,ts,tsx}，漏掉 .tsx 就会被 PurgeCSS 清掉

print: 修饰符只支持有限工具类，别指望它生成分页规则

print:hidden、print:block 这类能用，但 print:break-before-page 完全无效——Tailwind 解析器直接忽略，不报错也不生成 CSS。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 所有 break- 相关属性（break-before、break-after、break-inside）都不在默认工具集中
• 它们只在打印上下文有意义，Tailwind 默认不为未声明的变体生成规则
• 想用分页控制，必须手写 @layer utilities 注入，且同时提供 page-break-before 回退

分页失效的真正原因往往不在你写的类上

哪怕你正确写了 .break-before-page { break-before: page; page-break-before: always; }，它也可能静默失效：

• 父容器有 overflow: hidden、transform 或 filter，会截断分页上下文
• 目标元素不是块级（<div>、<code><section></section>），break-before: page 对 <span></span> 无效
• Chrome 打印预览和真实打印机行为不一致，Safari 对 break-before 支持弱，务必保留 page-break-before: always

更稳妥的做法：直接用 @media print 块写原生规则

如果你项目已有打印逻辑，或需要精细控制（比如表格表头重复、链接加 URL、强制黑底白字），硬塞进 Tailwind 工具链反而增加不确定性：

• 把所有打印样式统一写在 @media print { } 里，彻底隔离
• 用 link[media="print"] 单独引入 print.css，避免主样式膨胀
• 慎用 !important，仅用于覆盖第三方库内联样式或顽固默认值
• 测试时别只看 Chrome DevTools 的“打印预览”，务必导出 PDF 或用真实打印机验证分页和颜色

最容易被忽略的不是怎么写，而是 DOM 结构本身——哪怕 @layer utilities 写得再规范，只要上层有个 overflow: hidden 的 <div>，<code>break-before: page 就彻底失效，且浏览器既不报错也不警告。