If you searched for , , or , you likely need one thing: reliable print/PDF output without rewriting your whole UI.
This guide gives you a practical setup that works in production apps.
Quick answer
Add a screen in , then use classes like , , and to override screen-first styles for printed output.
Why print styles matter
Print and PDF output are still critical for:
- invoices and billing records
- receipts and fulfillment slips
- support exports and compliance evidence
- handoff documents for operations teams
If you skip print-specific styling, output often contains clipped components, dark backgrounds, and unreadable spacing.
Add print support in Tailwind config
Use a custom screen alias:
Now utilities will apply only in print media.
Example component pattern
Key point: hide interactive UI in print and neutralize dark-theme styling.
Print utility patterns that usually help
| Goal | Utility pattern |
|---|---|
| Hide controls/nav | |
| Remove dark backgrounds | |
| Tighten page spacing | |
| Remove cards/shadows | |
| Keep section grouping readable | |
Common failures (and fixes)
1. Text disappears in PDF preview
Cause: dark theme + inherited white text assumptions.
Fix: enforce print color classes at container boundaries.
2. Buttons and nav clutter output
Cause: no print-specific visibility rules.
Fix: hide non-document controls with .
3. Content breaks across pages awkwardly
Cause: no page-break strategy.
Fix: add print-specific wrappers and consider CSS break rules for large tables/sections.
Render test workflow (fast and reliable)
- Validate in browser print preview.
- Export PDF and compare with expected layout.
- Check edge cases: long names, long tables, empty states, and mobile widths.
- Re-run after each major UI theme or component-system update.
When print docs represent email events or receipts
Many teams print records triggered by async email events. In that setup:
- validate generated messages and attachments in Email Sandbox
- run deterministic pre-release checks in Email Integration Testing
- verify async event payload handling through Email Webhooks
- confirm final delivery outcomes with an Email Deliverability Test
Final take
Tailwind print styles are simple to configure, but quality comes from discipline: isolate print-only behavior, test realistic data, and treat print output as a product surface, not an afterthought.