嗨，大家好！这里是道长王jj~ 🎩🧙♂️
对于一个更像是界面而不是传统文档的网络应用程序，可能人们不太关心它在打印时的外观，因为不太可能有人会在那里打印内容。
然而，对于典型的以文档为导向的网站，特别是那些包含大量文本和图像内容的网站，可能会关心其在打印预览中的呈现。
在默认情况下，打印预览可能看起来不太理想。
那么我们该如何在不使用自定义 CSS 类和文件的情况下解决这个问题呢？
@media print {
a {
color: inherit;
text-decoration: none;
}
}
现在借助 Tailwind 的便捷的 print 和 screen 修饰符，网站在屏幕和纸上都可以呈现出出色的效果。
在 Tailwind 中设置打印和屏幕前缀
Tailwind 是一个出色的实用工具优先的 CSS 框架，我们希望能够在每个客户或项目中使用它。它就像是样式界的瑞士军刀，只不过没有那把几乎用不到的小剪刀。大多数实用工具从一开始就可用，但也有一些工具，它们就像是等待着您去发现的隐藏彩蛋。于是，引入 print 和 screen 修饰符。
起初，它们并不可用，只需打开 tailwind.config.js 文件并扩展可用屏幕：
module.exports = {
// ... 其他 tailwind 配置
extend: {
screens: {
print: {
raw: 'print' },
screen: {
raw: 'screen' },
},
},
}
这样，Tailwind 将自动为您生成可以在类中使用的媒体查询前缀。您可以在类中使用这些前缀来完全显示或隐藏元素，或根据需要调整所需的任何 CSS：
<div class="print:text-xl screen:text-sm">在纸上我看起来很大，在屏幕上看起来很紧凑！</div>
隐藏导航和页脚元素
当用户打印网页时，他们通常不需要网站的导航栏、页脚或其他全局横幅元素。因为这些元素主要在数字环境中有用。因此，通常的做法是在打印版本中隐藏这些元素。
<nav class="print:hidden"> ... </nav>
隐藏交互元素
交互式元素（如按钮、下拉菜单和表单）在打印页面上通常没有作用。为避免造成混淆，最好在打印版本中隐藏它们。
<button class="print:hidden">点击我！</button>
链接显示 URL
超链接是一种在屏幕上可以产生神奇效果的交互式元素，在打印页面上却处于休眠状态。为了提供上下文，可以在打印版本的链接旁边显示 URL，以便读者可以在需要时手动访问它们。虽然需要向全局 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">
考虑到屏幕和打印页面之间的差异，这些调整可以显著提升打印内容的清晰度、相关性和美观度。
🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？当你处于这个阶段时，你发现什么对你帮助最大？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨
