tailwind 的 print: 类默认不生效，需手动启用 print 屏幕、重启服务、确保 content 路径覆盖所有含 print: 的文件，且复杂打印逻辑应优先使用原生 @media print 块管理。

Tailwind 的 print: 类默认不生效，不是你写错了，是它根本没被编译进 CSS —— 必须手动启用、重启、覆盖路径，三者缺一不可。

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

v3+ 版本默认禁用所有打印相关变体。即使写了 print:hidden，只要配置里没声明 print，构建时就完全忽略。

• raw: 'print' 是唯一合法写法；print: 'print' 或 media: 'print' 都无效
• 必须加在 theme.extend.screens 下，例如：

  module.exports = {
    theme: {
      extend: {
        screens: {
          print: { raw: 'print' },
        },
      },
    },
  }

• 改完立刻重启开发服务器（npm run dev），热更新不会重读配置
• 若用了插件（如 @tailwindcss/typography），确认它没覆盖 screens 配置

content 路径必须覆盖所有含 print: 类的文件

Tailwind 的 PurgeCSS 机制只扫描 content 数组里 glob 匹配到的源码字符串。漏掉一个扩展名，对应类就会被删光。

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

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

下载

• ./src/**/*.{js,ts} 不会匹配 .tsx 或 .vue；得写成 ./src/**/*.{js,ts,tsx,jsx,vue}
• HTML 模板（如 public/index.html）也要显式加入：./public/**/*.html
• 第三方 UI 库（如 DaisyUI）若用了 print: 类，其源码路径也得加进 content
• 检查构建后 CSS 文件里是否真有 @media print 块，没有就说明路径漏了

分页、背景、表格表头等关键行为不能靠 print: 修饰符

Tailwind 解析器根本不支持 print:break-before-page、print:bg-white 这类写法——它们会被静默跳过，不报错也不生成规则。

• break-before: page 必须手写：

  @layer utilities {
    .print-page-break {
      break-before: page;
      page-break-before: always;
    }
  }

• 浏览器默认禁用背景色和图片；print:bg-white 在预览里永远不显示，得加 -webkit-print-color-adjust: exact（仅 Chrome/Edge 支持）
• 表格跨页时 <thead> 不自动重复，必须用 <code>@media print 单独写 thead { display: table-header-group; }
• 父容器若有 overflow: hidden 或 filter，会直接破坏分页上下文，break-before 彻底失效且无提示

更稳妥的方案：用原生 @media print 块统一管理

如果你的打印逻辑稍复杂（比如隐藏导航、重设字体、强制黑底白字、补全 URL 后缀），硬塞进 Tailwind 工具链反而容易失控。

• 把所有打印样式集中写在 @media print { } 里，避免和 @layer components 或第三方样式冲突
• 用 !important 只在必要场景覆盖内联样式或顽固库默认值（比如某些 UI 组件的 style="display: flex"）
• 测试时别只信 Chrome DevTools 的“打印预览”——Safari 对 break-before 支持弱，真实 PDF 导出或物理打印机才反映最终效果
• 最常被忽略的不是怎么写 CSS，而是 DOM 结构本身：哪怕 @layer utilities 写得再规范，只要上层有个 overflow: hidden 的 <div>，<code>break-before: page 就彻底失效