Print styles with Tailwind

Print styles in Tailwind use the print: variant, which compiles to an @media print rule: print:hidden drops the navigation and print:block opens a closed panel, with no JavaScript.

The page has no viewport

Print knows no window width and no scrolling: paper is about 21 cm wide and @page sets the margins. A three-column layout with lg:grid-cols-3 arrives on paper as three narrow columns, so the variant has to bring it back to one.

@import "tailwindcss";

@media print {
  @page { margin: 16mm; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }
  .break-avoid { break-inside: avoid; }
}

Rules that are not utilities belong in the input file; print:* utilities stay in the markup. The build does not change, and the command below rebuilds the CSS on every save.

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

What to hide and what to show

A table that scrolls sideways loses its hidden columns on paper: print:overflow-visible plus a smaller font makes it readable. The same holds for an accordion panel, which you open with print:block.

• Backgrounds are not printed by default: keeping them needs print-color-adjust: exact, and the result depends on the driver.
• A position: fixed element repeats or vanishes on every page, because print has no viewport.
• Hiding the wrong content is worse than not printing at all: the page has to stay readable without menus and buttons.
• Source: the tailwindcss.com documentation and the CSS Paged Media specification, read on 1 November 2026; MIT licence.

The limitation

Pagination is not controllable: break-inside: avoid works on simple blocks but browsers ignore it once a block is taller than the page, and an external PDF engine ignores @media print altogether. The second limit is verification: no automated test replaces the print preview, because the driver decides margins and scale.

Where to continue

In the EneUI catalogue read invoices-01, transaction-history-01 and ticket-confirmation-card, three views that often end up on paper. For calculations read calc() and CSS variables, for the basics what Tailwind CSS is, and for the comparison Tailwind against CSS modules. The other two pieces in the series are fluid typography with clamp and focus-visible with Tailwind.