Print

Invoices, receipts, tickets, reports — any page that might get printed usually needs a different layout than the one shown on screen. Rather than maintaining a separate print.css, Print utilities let you control that layout directly in your markup, using classes scoped entirely to the print media type.

@media print {
  .print-hidden { display: none !important; }
  .print-block { display: block !important; }
  .print-inline { display: inline !important; }
  .print-inline-block { display: inline-block !important; }
  .print-flex { display: flex !important; }
  .print-grid { display: grid !important; }
}

Everything is wrapped in @media print, so none of these rules apply, or add any weight, on screen — they only activate when the page is actually being printed or rendered to PDF. The !important is intentional: print utilities are meant to always win over whatever display value is already active on an element at print time, regardless of how specific the competing rule is.

Available Classes

Hiding Navigation Chrome

The most common use case: keeping the app shell off the printed page entirely.

<header class="navbar print-hidden">...</header>
<aside class="sidebar print-hidden">...</aside>

<main>
  <!-- page content, printed as normal -->
</main>

Anything wrapped in .print-hidden simply doesn't exist on the printed page or exported PDF — no blank gaps, no leftover borders.

Revealing Print-Only Content

The reverse case is just as common: content that's hidden on screen (via .is-hidden, a modal, or a collapsed section) but should appear only when printed — a formatted summary block, a signature line, or legal text.

<div class="invoice-summary is-hidden print-block">
  <p>Total due: $1,204.50</p>
  <p>Payment terms: Net 30</p>
</div>

Because .print-block carries !important, it overrides .is-hidden's display: none the moment the page enters print context, without needing to touch the screen-facing hidden state at all.

Previewing Print Styles

You don't need to send a page to a physical printer to check these. In Chrome or Edge DevTools, open the Rendering tab and set "Emulate CSS media type" to print — the page re-renders live with all @media print rules active. Alternatively, Cmd/Ctrl + P opens the browser's native print preview, which applies the same rules.

A Note on Breakpoints

Print utilities intentionally don't accept responsive prefixes (md:print-hidden isn't a valid class). They respond to media type, not viewport width — a printed page doesn't have a "viewport" in the responsive sense, so there's no breakpoint scale to apply. Each class is a single, flat rule that either applies at print time or doesn't.