Tailwind CSS to PDF

Tailwind CSS to PDF with print variants, page breaks, colors that survive printing, and one API call to render a pixel-perfect file.

Tailwind works well for PDFs like invoices, reports and resumes, because the renderer is just Chrome. A few details make the difference between "looks right in the browser" and "looks right on paper".

Quick answer. Send your Tailwind HTML to the API. With the CDN script, add a short wait_delay so styles load first.

curl https://html-pdf.com/v1/pdf -H "Authorization: Bearer $HTML_PDF_KEY" \
  -d '{"html": "<script src=\"https://cdn.tailwindcss.com\"></script><h1 class=\"text-3xl font-bold\">Hello</h1>", "wait_delay": 1}' -o out.pdf

1. Include Tailwind in the HTML you send

This step makes sure your styles are there when the page renders. For production, compile Tailwind and inline the CSS in a <style> tag so the renderer doesn't depend on a network call.

npx @tailwindcss/cli -i input.css -o out.css --minify

<!doctype html>
<html>
<head><meta charset="utf-8"><style>/* contents of out.css */</style></head>
<body class="p-12 font-sans text-slate-800">…</body>
</html>

For quick prototypes you can load the Tailwind Play CDN script. Give it time to generate styles before rendering (see wait_delay below).

2. Use print variants

This lets you change the layout for paper only. Tailwind ships a print: variant for print-only tweaks.

<nav class="print:hidden">…</nav>
<div class="shadow-lg print:shadow-none">…</div>
<p class="text-sm print:text-xs">…</p>

3. Page breaks

These utilities control where pages start and what never splits. Tailwind has classes for CSS fragmentation.

<section class="break-before-page">Chapter 2</section>
<div class="break-inside-avoid">This card never splits across pages</div>

More on this in CSS page breaks for HTML to PDF.

4. Keep background colors

This keeps your colored backgrounds in the PDF. Browsers drop backgrounds when printing unless asked not to, so add this once.

* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

With html-pdf.com, print_background is already on by default.

5. Size the page

This step sets the paper size so your layout fits. Either set paper options in the request ("format": "A4", "margin": "12mm") or use CSS @page with "prefer_css_page_size": true.

Design at a fixed width (A4 ≈ 794px, Letter ≈ 816px at 96 dpi) to avoid surprises.

Render it

This is a full request that renders a Tailwind invoice to A4.

curl https://html-pdf.com/v1/pdf -H "Authorization: Bearer $HTML_PDF_KEY" \
  -d @- -o invoice.pdf <<'JSON'
{"html": "<!doctype html><html><head><script src=\"https://cdn.tailwindcss.com\"></script></head><body class=\"p-12\"><h1 class=\"text-3xl font-bold\">Invoice #042</h1></body></html>",
 "format": "A4", "wait_delay": 1}
JSON

wait_delay gives the CDN script a second to apply styles. You don't need it when you inline compiled CSS.

From an AI agent

This lets an assistant design and render the PDF for you. Connect the html-pdf.com MCP server and ask "Design a one-page Tailwind invoice for Acme and make it a PDF." The agent writes the HTML and calls html_to_pdf for you.

100 free pages, then from $0.005 per page, and credits never expire. Get an API key.

FAQ

How do I convert a Tailwind CSS page to PDF?

Send the HTML to POST https://html-pdf.com/v1/pdf with your compiled Tailwind CSS inlined in a <style> tag. If you use the CDN script instead, add "wait_delay": 1 so styles apply before rendering.

Why are my Tailwind background colors missing in the PDF?

Browsers drop backgrounds when printing. Add print-color-adjust: exact in your CSS. On html-pdf.com, print_background is already on by default.

How do I add page breaks with Tailwind?

Use break-before-page to start a new page and break-inside-avoid to keep a block from splitting across pages.

Does Tailwind's print variant work in PDFs?

Yes. The renderer is Chromium, so classes like print:hidden and print:shadow-none apply when the PDF is generated.