How to style for print in Tailwind
Default browser print stylesheets look broken on most websites — navs, footers, dark themes, and interactive elements all carry over to paper. Tailwind has a print: variant built in (since v3.1, June 2022) that makes most of the cleanup a one-character prefix away. Here's the working set of patterns.
print: is already there
print: ships with Tailwind out of the box. No config, no plugin:
1<div class="print:text-xl">Larger on paper</div>There's no built-in screen: variant — and you don't need one. The absence of a print: rule already means screen-only, so default classes do the screen work and print: overrides them for paper:
1<div class="text-sm print:text-xl">Compact on screen, larger on paper</div>Hide chrome on print
Navs, footers, sidebars, ads, buttons, dropdowns — none of them belong on paper:
1<nav class="print:hidden"> ... </nav>
2<button class="print:hidden">Click me</button>
3<aside class="print:hidden"> ... </aside>Show URLs next to links
Hyperlinks are dead on paper without their target. The cleanest fix is one custom rule in your global CSS — utilities can't generate ::after content from classes:
1@media print {
2 a[href^="http"]::after {
3 content: " (" attr(href) ")";
4 }
5}Restricting to a[href^="http"] skips internal anchors, mailto:, and tel:, which would print as noise.
Control page breaks
The print:hidden/print:block pattern handles visibility but not pagination. For breaks, Tailwind ships utilities that map to the modern CSS break-before / break-after / break-inside properties:
1<h2 class="break-before-page">A new section starts on its own page</h2>
2<table class="break-inside-avoid">...</table>
3<div class="break-after-avoid">Keep me with the next element</div>break-inside-avoid on tables and figures alone fixes most of the "split across pages mid-row" complaints.
Page margins and size with @page
Tailwind doesn't help with paged-media specifics — @page is a CSS-only rule for margins, page size, and orientation:
1@page {
2 size: A4;
3 margin: 2cm;
4}Put this in your global CSS (or a print-only stylesheet) when layout on paper actually matters. Browsers default to ~0.5 inch margins, which is fine for casual pages but wrong for anything that wants to look like a document.
Force colours and backgrounds in print
Browsers strip backgrounds and dim colours by default. If a design depends on a specific print appearance — branded headers, syntax-highlighted code blocks, a status pill in green — opt back in with print-color-adjust:
1@media print {
2 .print-keep-colors {
3 print-color-adjust: exact;
4 -webkit-print-color-adjust: exact;
5 }
6}Or inline as a Tailwind arbitrary value:
1<pre class="print:[print-color-adjust:exact]">...</pre>Swap in grayscale art
If a screen design uses colour photography or coloured charts, keep separate grayscale assets and swap them on print:
1<img src="chart-color.svg" class="block print:hidden" alt="Chart">
2<img src="chart-bw.svg" class="hidden print:block" alt="Chart">This is overkill for most sites; for document-heavy ones (reports, manuals, invoices) it's the cleanest fix.
Tailwind v4 note
On Tailwind v4 (released Jan 2025), the CSS-first @theme config replaces tailwind.config.js, but print: and the page-break utilities work identically. Nothing in this post needs to change for v4.