# 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.

```bash
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.

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

```html
<!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.

```html
<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.

```html
<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](https://html-pdf.com/html-to-pdf-page-breaks).

## 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.

```css
* { -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.

```bash
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](https://html-pdf.com/guides) 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](https://html-pdf.com/login).

## 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.