如何在Tailwind CSS中配置打印工具类-css教程-PHP中文网

print:hidden 无效是因为 tailwind v3+ 默认不生成 print 变体，需手动通过插件注册 addvariant('print', '@media print')，重启开发服务器，并确保 content 路径包含所有相关文件。

如何在tailwind css中配置打印工具类

print:hidden 为什么没效果？先确认变体是否启用

不是你写错了，是 Tailwind 默认根本没生成 @media print 规则——哪怕写了 print:hidden，构建后 CSS 里也找不到对应代码。

v3+ 版本必须手动注册 print 变体，方式只有一种：用插件 + addVariant。别在 variants 里硬加（v2 写法已废弃），也别试图用 screens 模拟（print: { raw: 'print' } 是无效的）。

在 tailwind.config.js 的 plugins 数组里添加：

require('tailwindcss/plugin')(({ addVariant }) => {
  addVariant('print', '@media print')
})

改完必须重启开发服务器（npm run dev），热更新不重读配置
确保 content 路径覆盖所有含 print: 类的文件，比如 ./src/**/*.{js,ts,tsx}，漏掉 .tsx 就会被 PurgeCSS 清掉

哪些 `print:` 工具类真正可用？别乱套

Tailwind 不会给所有工具类自动挂上 print: 前缀。它只对 corePlugins 中启用且语义合理的类生成变体，比如 print:hidden、print:block、print:text-black 都行；但 print:backdrop-blur 或 print:animate-pulse 这类打印无意义的，压根不会编译。

常用且安全的组合：

print:hidden / print:block / print:flex —— 控制显隐和布局流
print:text-black / print:bg-white —— 强制黑白，避免灰字/彩色背景印不出来
print:p-0 / print:my-0 —— 清除默认间距，防止内容被截断
print:page-break-before —— 注意：这是旧语法别名，对应 break-before: page，但仅部分浏览器支持

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

查某个类是否支持 print:，直接翻官方文档的“Utilities”页，看该工具类是否标注了 “Print variant”
如果写了 print:xxx 没生效，优先检查插件是否注册成功，再确认该工具类本身是否在 corePlugins 中启用（比如 textOpacity 默认关，print:text-opacity-0 就不会生成）

`break-before: page` 不能用 `print:` 修饰符

Tailwind 不支持 print:break-before-page 这种写法——解析器直接忽略，不报错也不生成规则。

必须手写，推荐用 @layer utilities 注入兼容性类：

@layer utilities {
  .print-page-break-before {
    break-before: page;
    page-break-before: always; /* 回退给老浏览器 */
  }
}

break-before: page 只对块级元素生效，对 <span></span> 这类 inline 元素加了也无效
父容器若有 overflow: hidden、filter 或 transform，会静默破坏分页上下文，加了也白加，且浏览器完全不提示
Chrome 打印预览和真实 PDF 输出行为不一致，Safari 对 break-before 支持弱，所以 page-break-before: always 必须保留