How to Convert Tailwind HTML to a PDF Without Losing Styles

Tailwind is everywhere, including in the HTML that AI tools generate, so a lot of the designs people want to print are Tailwind pages. They also fail in a specific, frustrating way: you convert to PDF and half the styling is gone, or the background is white, or the spacing collapsed. The causes are well understood, and once you know them the fix is straightforward.

Reason one: the styles had not loaded yet

Many Tailwind pages, especially ones from AI tools, pull Tailwind from a CDN. That CDN generates the CSS in the browser at load time. If a converter grabs the page before that generation finishes, it captures an unstyled or half-styled version. This is the single most common cause of a Tailwind PDF that looks nothing like the page.

The fix is to make sure the styles are fully applied before the export happens. If you control the conversion, add a short delay or wait for the stylesheet to be ready. Better, use a renderer that waits for assets to finish loading before it captures. If you are rolling your own conversion, this waiting step is the thing to get right.

Reason two: print dropped the background colors

Tailwind designs lean heavily on background utilities. When you print, browsers skip background colors and images by default to save ink. So a design with a dark section or colored cards can export with those areas blank white. There are two fixes. In the browser print dialog, enable Background graphics. In CSS, add the property that tells the browser to keep colors:

print-color-adjust: exact; (with the webkit-prefixed version for older engines). Applied to the elements that carry backgrounds, this forces the colors through. Many rendering tools set this automatically, which is why a design that prints white from the browser can come out correct from a dedicated renderer.

Reason three: you needed a raster export

Even with styles loaded and backgrounds forced on, a vector conversion can re-interpret a complex Tailwind design and shift things subtly, because it is rebuilding the page rather than photographing it. For a visual design, the most faithful result comes from rendering the page to a high-resolution image and placing that in the PDF. That raster approach reproduces gradients, shadows, rounded corners, and exact spacing pixel for pixel. Render at 300 DPI so it stays sharp in print.

Setting the page size for a Tailwind design

Tailwind pages are usually built for a screen, not a page, so they may be full-width or a fixed pixel width that does not match paper. Before exporting, decide your page size. If you are hand-coding the conversion, the CSS at-rule @page lets you set the page size and margins for print. If you are using a tool, set the page size there. Either way, preview the result at the real page size so you can catch a layout that was designed for a wide screen and needs adjusting for a portrait page.

A reliable workflow

1. Open the Tailwind HTML and let it fully render, including the CDN-generated styles.
2. Confirm the backgrounds and layout look correct in the preview.
3. Set your page size and margins.
4. For a visual design, export a 300 DPI raster PDF. For a plain page, a vector PDF is fine and keeps text selectable.
5. Open the PDF and check that backgrounds, spacing, and fonts survived.

Quick checklist

• Did the Tailwind stylesheet finish loading before capture?
• Are background colors preserved, via Background graphics or print-color-adjust?
• Is the page size set, rather than left at whatever the screen width was?
• For a design, did you render raster at 300 DPI rather than a vector re-interpretation?

Get those four right and a Tailwind design exports looking exactly like the page. The two that catch people most often are the styles not being fully loaded at capture time, and background colors being dropped in print. Solve those and most Tailwind PDF problems disappear.

Web fonts in a Tailwind print

Tailwind pages often pull a web font, and fonts are a common reason a PDF looks slightly off. If the font has not loaded when the page is captured, the browser falls back to a default and your spacing and line breaks shift. The fix is the same discipline as with the stylesheet: let the font finish loading before you export. Keep the font link in the page, and if you are scripting the conversion, wait for the fonts to be ready. Previewing the page before export is the simplest way to confirm the right typeface is showing.

Responsive breakpoints and print

Tailwind is built mobile-first, with breakpoints that change the layout at different screen widths. That is great for the web and occasionally surprising in print, because the page renders at whatever width the converter uses, which decides which breakpoint is active. A design that looks right on a wide screen can render in its narrow, stacked layout if the capture width is small, or the reverse. The fix is to set the render width and page size deliberately, so you know which layout you are capturing, rather than leaving it to chance. Preview at the real page size and adjust if the wrong breakpoint is showing.

Testing your Tailwind PDF

Before you rely on a Tailwind export, run one full test and look for the three usual suspects: are the styles fully applied, are the background colors present, and is the layout the one you intended rather than a different breakpoint. If all three are right in the test, they will be right in the real thing. Most Tailwind PDF complaints trace back to exporting before the page was fully ready, so the single most valuable habit is to slow down and let everything load before you capture.

Use Tailwind's print variant

Tailwind has a built-in feature made for exactly this situation: the print variant. By prefixing a utility with print, you can apply styles that only take effect when the page is printed or exported. This lets you clean up a design for paper without changing how it looks on screen. You might hide an on-screen navigation bar or a button in print, force a white background, adjust padding, or make text a size that reads better on a page. Because these styles apply only at print time, your screen design stays exactly as it was.

This is worth knowing because it gives you a clean way to prepare a Tailwind page for export rather than fighting the default print behavior. Hide the parts that make no sense on paper, ensure the background and text colors are what you want, and set a sensible page width, all with print-prefixed utilities. If you are asking an AI to build a Tailwind page you intend to print, you can even request that it add print styles so the page is ready to export from the start. Combined with letting the styles fully load and preserving background colors, the print variant turns a screen-first Tailwind page into one that exports cleanly and predictably.

Frequently asked questions