Tailwind 打印视图不应用响应式样式

Question

考虑这个案例：

<p class="lg:hidden">
    Hello
</p>

当用户使用屏幕尺寸大于

lg

的设备访问页面时。他们不会看到文字

hello

。 但是，如果用户尝试打印该页面，打印结果仍包含文本

Hello

。当我们使用响应式样式前缀（如

lg:

）时会导致此问题

Answer 1

您可以考虑使用

print

变体 专门应用 CSS 进行打印：

使用

print

修饰符有条件地添加仅在打印文档时应用的样式：

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>