tailwind to PDF

[danielecas]

I bought "Refactoring UI" yesterday and I am also trying to learn Tailwind CSS.

One issue I am facing at the moment is when I try to convert my html/css page to pdf.

The result looks very different after the conversion. Some elements go off the page, some sections and pictures are stacked instead of showing horizontally etc.

These are screenshots of how my test HTML + Tailwind CSS page looks like:

And here is the resulting PDF (quite different)

response.pdf

I would like to end up with a printable pdf that looks nicely designed and formatted as closely as possible to the web page.

Anybody has done this before and/or has any tips?

[tuhlmann]

Hi @danielecas ,

I haven't done that with tailwindcss before (learning it myself), but in other situations we needed to create a printable version of a web page. There are a few things you can look at and tune in order to produce a print view (or pdf).

First, you can add an additional or entirely different css for print media. You can do that by adding the media="print" param to the link that that includes you css. A media="screen" limits a css file to screen view only and it would not be used if the browser creates a print view.

To check your print view without actually printing, you can change the Rendering option in the Chrome DevTools to emulate print media.

A last tip, and that's maybe what happens to your layout- when I printed to A4 (similar to US letter format), the browser used the MD breakpoint (I think I remember that correctly) to render the page instead of lg or xl. So change the browser width and see how your page renders in a smaller size. Maybe you just need to add some styling to fix layout in those cases?

Hope that help!

[tlgreg]

Which resolution is triggered is browser and environment-dependent, md is a common one (but for example chromium gets me different breakpoints based on portrait/landscape, but paper size and DPI does not matter, for those they most likely scale it afterward), the safest bet is to create a print specific stylesheet if a print is important for a page.

[danielecas]

many thanks for the tips guys, I will try and let you know how it goes

[rahuldave]

Having the same issue with cards. On printing everything separates out. Tailwind by itself does not seem to have any print directives..so not sure how to do this..

[opdavies]

There is a section in the docs for adding a print screen that will allow for adding classes specifically for print - https://tailwindcss.com/docs/breakpoints/#styling-for-print.

Then you can do things like <div class="font-serif leading-relaxed text-gray-800 text-sm print:text-xs"> within your markup.