How to export a Tailwind CSS page to a clean PDF

Updated: 2026-10-14 · Dawwerni team

To turn Tailwind HTML into a PDF, make sure the styles exist before capture: with the Play CDN, wait a few seconds so it can generate the CSS. Then add print: variants (print:hidden, print:break-before-page), reset h-screen sections for print, keep dark backgrounds with print-color-adjust, and save with Chrome's Print to PDF for selectable text.

Why Tailwind pages need a little care before export

Tailwind itself prints perfectly well: it is plain CSS in the end. The surprises come from how the page was built. Single-file pages, especially the ones AI assistants generate, almost always load Tailwind through the Play CDN script, which creates the CSS in the browser after the page loads. Add full-height hero sections, a dark theme and a sticky navigation bar, and the PDF can look nothing like the screen.

This guide goes through each of those causes with the Tailwind classes that fix them. If you cannot or do not want to edit the HTML, our free HTML to PDF converter has settings for most of them: a wait time, frozen animations, fixed headers shown once and pinned 100vh sections.

The Play CDN generates CSS at runtime: wait for it

The Play CDN is a script, not a stylesheet. It scans the classes in your HTML, generates the matching CSS and injects it into the page, then keeps watching for changes. Until that has happened, the page is unstyled. A tool that captures the page immediately after load, or a print dialog opened in the first instant, can catch a bare HTML page with default fonts and no layout.

The fix is simply to wait. In a browser, let the page settle for a second or two before pressing Ctrl+P. In a converter, set a wait of 2-3 seconds (more on slow connections). With headless Chrome or Puppeteer, wait for network idle and then a short delay before calling the PDF function.

<!-- Tailwind v3 Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Tailwind v4 browser build -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Better for anything you export often: compile the CSS

Tailwind's own documentation says the Play CDN is for development, not production. If a page is going to be exported regularly, generate a static stylesheet once with the CLI and link it like any other CSS file. The page is then styled the instant it loads, which removes the timing problem completely.

# Tailwind v4 (input.css contains: @import "tailwindcss";)
npx @tailwindcss/cli -i input.css -o styles.css

# Tailwind v3
npx tailwindcss -i input.css -o styles.css

Use the print: variant to clean up the PDF

Tailwind includes a print variant that applies a utility only inside @media print. It is the quickest way to hide the parts of a page that make no sense on paper and to control page breaks without writing custom CSS. The break utilities (break-before-page, break-after-page, break-inside-avoid) combine with it naturally.

<!-- hide navigation, buttons and banners in the PDF -->
<nav class="sticky top-0 print:hidden">...</nav>
<button class="print:hidden">Book a demo</button>

<!-- show something only in print -->
<p class="hidden print:block">Printed from example.com/report</p>

<!-- start each chapter on a new page, keep cards whole -->
<section class="print:break-before-page">...</section>
<div class="rounded-xl shadow-lg break-inside-avoid print:shadow-none">...</div>

<!-- remove the shadow and spacing that waste paper -->
<main class="max-w-5xl mx-auto px-8 print:max-w-none print:px-0">...</main>

• print:hidden is the single most useful class: menus, cookie banners, chat bubbles, CTA buttons.
• print:break-before-page on each top-level section gives you one section per page, like a report.
• break-inside-avoid on cards, figures and table rows keeps them from being cut at a page edge. Inside a grid it is not always honoured; add print:block to the grid container if cards still split.
• print:text-black and print:bg-white are useful when you want a light, ink-friendly version of a dark page.

h-screen and min-h-screen sections

h-screen is height: 100vh and min-h-screen is min-height: 100vh. On screen, that makes a hero fill the window. In a PDF, the viewport is replaced by the page box or by whatever size the capture tool uses, so these sections can come out much taller or shorter than intended, push content onto a nearly empty page, or get cut. Tailwind v4 also has the dvh and svh variants (h-dvh, min-h-svh), which behave the same way here.

For print, let them size to their content. If you convert with a screenshot-based tool instead, choose a viewport height that matches your design; our converter pins 100vh sections to the viewport height you pick so the hero keeps its proportions.

<section class="min-h-screen flex items-center print:min-h-0 print:h-auto print:py-12">
  <h1 class="text-6xl font-bold">Annual report 2026</h1>
</section>

Dark mode and background colours

Browsers drop background colours when printing unless asked to keep them. A Tailwind page with bg-slate-900 and text-white therefore prints as white text on a white page: apparently blank. You have two clean options. Keep the dark design by asking the browser to print backgrounds, or switch to a light palette for print with print: classes.

Tailwind has no built-in utility for print-color-adjust, but an arbitrary property works in v3.0 and later and in v4. Put it on the body so the whole page inherits it; for older Safari and Chromium versions, which only read the -webkit- prefixed name, the small style block below covers both spellings. Ticking Background graphics in Chrome's print dialog has the same effect for one export.

<!-- Option A: keep the dark design -->
<body class="bg-slate-900 text-white [print-color-adjust:exact]">

<!-- or with both spellings, for every element -->
<style>
  @media print {
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
</style>

<!-- Option B: light version for paper -->
<body class="bg-slate-900 text-white print:bg-white print:text-black">

Tailwind v4 colours (oklch) and screenshot libraries

Tailwind v4 defines its default palette in the oklch() colour space and uses color-mix() for opacity modifiers such as bg-blue-500/50. Every current browser understands these, so printing with Chrome, Edge, Firefox or Safari is fine. Screenshot libraries that re-implement CSS parsing in JavaScript are a different story: older releases of html2canvas, still common in tutorials, cannot parse oklch() and either throw an error or leave colours out.

Practical consequences: if a one-click image-based PDF of a Tailwind v4 page shows missing colours or fails, use the browser's Print to PDF route instead, which uses the real rendering engine. If you control the theme, you can also define your brand colours in hex or rgb in the @theme block, which every tool reads.

@import "tailwindcss";

@theme {
  --color-brand-500: #2563eb;   /* plain hex: understood by any tool */
  --color-brand-900: #1e3a8a;
}

Export settings that work for Tailwind pages

1. Open the page in Chrome or Edge and wait until the styles and fonts have loaded.
2. Press Ctrl+P (Cmd+P), choose Save as PDF, pick A4 or Letter, and set Margins to Default or a small custom value.
3. Under More settings, tick Background graphics if your design uses coloured sections, and untick Headers and footers.
4. Check the preview for cut cards and empty pages, then add print: classes where needed and repeat.
5. If you prefer not to touch the code, drop the .html file into the HTML to PDF tool, set a wait of 2-3 seconds for the Play CDN, and use Print / Save as PDF for selectable text or Download PDF for a pixel-faithful copy.

If something still looks wrong

Pages generated by ChatGPT, Claude or Gemini are almost always Tailwind plus the Play CDN plus a chart library; the ChatGPT canvas to PDF guide covers the chart side. When a specific element still looks wrong, the HTML to PDF troubleshooting table lists symptoms and fixes, and the print CSS cheat sheet has the plain CSS equivalents of every print: class used here.