突然想到“如果有人……打印此页面怎么办？”而且更不祥的是：“如果它们在艰难的夜晚之后看起来像毕加索绘画，该怎么办？”

对于一个界面而不是经典文档的Web应用程序，您可能不太在乎其印刷外观，因为它不太可能有人会在那里打印一些东西。但是，对于具有大量文本和图像内容的典型面向文档的网站，您可能想看看它的打印预览。看起来很糟糕，对吗？我们如何在不诉诸于自定义CSS类和文件的地狱的情况下进行修复？这样？

@media print {
  a {
    color: inherit;
    text-decoration: none;
  }
}

好吧，不！借助Tailwind持续不错的print和screen修饰符，您的网站可以在屏幕和纸上看起来很棒。关于五彩纸屑般的打印输出，不再有噩梦！

在尾风中设置印刷和屏幕前缀

tailwind是我们希望在每个客户或工作项目中都可以使用的可怕的公用事业第一css框架。就像瑞士人的造型刀一样 - 只是没有微小的，几乎没有用的剪刀。大多数公用事业是从一开始就被激活的。但一些？它们就像隐藏的复活节彩蛋，等待您找到。输入：print和screen修饰符。

从一开始就无法使用，但是幸运的是，您无需安装任何插件即可开始。只需打开tailwind.config.js文件并扩展可用屏幕：

module.exports = {
  // ... rest of tailwind config
  extend: {
    screens: {
      print: { raw: 'print' },
      screen: { raw: 'screen' },
    },
  },
}

以这种方式，tailwind现在将自动生成媒体查询前缀，您可以在课堂中使用。您可以使用它们完全根据印刷而完全显示或隐藏元素，或者对您想要的任何CSS进行相应的调整：

<div class="print:text-xl screen:text-sm">I’ll look big on paper but compact on screen!</div>

让我们介绍您想在页面上调整印刷样式的其他一些示例。

隐藏导航和页脚元素

当用户打印网页时，他们通常不需要网站的导航栏，页脚或任何网站范围的横幅元素。这些仅在数字环境中才有用。因此，将这些元素隐藏在打印版本中是一种常见的做法。

<nav class="print:hidden"> ... </nav>

隐藏互动元素

交互式元素（例如按钮，下拉列表和表单）在印刷页面上没有目的。隐藏它们是一个好主意，以免使读者感到困惑。

<button class="print:hidden">Click Me!</button>

显示链接的URL

超链接是互动元素，可在屏幕上构想，但在纸张上处于休眠状态。为了提供上下文，在打印版本中显示链接文本旁边的URL可能会有所帮助，以便读者可以在需要时手动访问它们。

为此，我们确实需要在我们的全局CSS中添加自定义CSS类，但是只有一个！

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

优化图像和图形

高色图像可能并不总是很好地打印好，尤其是在灰度中。您可能需要增强对比度，删除背景图像，甚至用灰度对应物交换彩色图像，以确保清晰度。

<img src="colored-image.jpg" class="screen:block print:hidden">
<img src="grayscale-image.jpg" class="screen:hidden print:block">

考虑到屏幕和印刷页面的独特性质，这些调整可以显着提高印刷内容的清晰度，相关性和美学。