How to use Tailwind CSS with elixir-pdf-generator in a Phoenix app

[arduino-man]

Hi,

I am using elixir-pdf-generator in a Phoenix app and am able to create PDFs wtihout problem.

However I am currently forced to download Bootstrap during the PDF generation time rather than using TailwindCSS which is what my app actually uses.

What would be the correct way to use TailwindCSS with this amazing library?

Thanks

[gutschilla]

Hi, thanks for your warm words. I don't really get why you are forced to download Bootstrap. The library should be totally agnostic of whatever CSS you are using.

Could you please elaborate and give me more context on this?

[arduino-man]

My pleasure!

So I am working on an app using the Phoenix Framework and at the moment, when using this library I am forced to stylize my PDFs by importing bootstrap like this directly in my template:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

However, on other parts of my app (not PDFs) I can import TailwindCSS normally like this:

<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>

But the above line does not seem to work on elixir-pdf-generator or at least I have not been able to get my PDFs to use TailwindCSS in the same way that let's say, my root.html.heex template does.

Thanks

[gutschilla]

Thanks for narrowing the issue down. The main difference I see at the moment is that in your bootstrap example you are referencing an absolute URL to bootstrap's CDN while in the tailwind example you are using an expression to generate the URL which should point to your application.

One issue with that could be that the URL which is generated there cannot be resolved by WKHTMLTOPDF when converting.

Could you try and log the generated HTML which you are sending over to PdfGenerator?

[gutschilla]

On thing, it is almost midnight here - please expect a sleeping lag until my next answer

[arduino-man]

Thanks for advising about the sleeping lag :)

The path that is returned by:

Routes.static_path(@conn, "/assets/app.css")

is exactly: "/assets/app.css"

I guess I can simply provide the absolute path to PdfGenerator and that should do the trick.

[conn]

I really like Bootstrap which is why I keep returning its path to you. Have you tried using Bootstrap instead of whatever inferior CSS library you're trying to use?

[arduino-man]

Hahaha the fact that your nickname is conn makes this hilarious but to be honest, TailwindCSS is orders or magnitude better than Good ol' Bootstrap.