How to add Print Styles in Tailwind? | Tailwind CSS Interview Questions

What You'll Learn

Print modifier
Common print patterns
Hiding elements

Print Modifier

index.htmlHTML

<nav class="print:hidden">
  Navigation (hidden when printing)
</nav>

<article class="print:text-black print:bg-white">
  Content optimized for print
</article>

Common Patterns

index.htmlHTML

<!-- Hide navigation and footer -->
<header class="print:hidden">...</header>
<footer class="print:hidden">...</footer>

<!-- Remove backgrounds -->
<div class="bg-gray-100 print:bg-white">

<!-- Adjust text colors -->
<p class="text-gray-600 print:text-black">

<!-- Show URLs after links -->
<a href="..." class="after:print:content-[attr(href)]">
  Link text
</a>

Page Breaks

index.htmlHTML

<div class="break-before-page">Starts on new page</div>
<div class="break-after-page">Page break after</div>
<div class="break-inside-avoid">Don't break inside</div>

Full Example

index.htmlHTML

<body class="print:text-sm">
  <nav class="print:hidden">...</nav>
  <main class="print:max-w-none">
    <article class="break-inside-avoid">
      Content...
    </article>
  </main>
</body>