Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to tailwindcss (I'm using rails 7 api with tailwindcss-rails) in html templates to generate wicked pdf #1126

Open
atif opened this issue Aug 26, 2024 · 2 comments
Open

How to tailwindcss (I'm using rails 7 api with tailwindcss-rails) in html templates to generate wicked pdf #1126

atif opened this issue Aug 26, 2024 · 2 comments
Labels
wkhtmltopdf

Comments

@atif
Copy link

atif commented Aug 26, 2024

Issue description

I am struggling to use tailwindcss to generate html files using tailwindcss - I've setup the asset_host to load images but not all tailwind styles are loaded - here's my code

<!DOCTYPE html>
<html>
  <head>
    <title>PDF</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <%= csp_meta_tag %>
    <%= wicked_pdf_stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <%= wicked_pdf_stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>
  <body>
    <main class="container mx-auto flex flex-col">
      <%= yield %>
    </main>
  </body>
</html>

I am using some custom tailwind classes as well like h-[200px] etc.

Expected or desired behavior

Html page should be loaded with all tailwind css styles

System specifications

MacOS 14.4.1 (23E224), M1 Pro

wicked_pdf gem version (output of cat Gemfile.lock | grep wicked_pdf): 2.8.1

wkhtmltopdf version (output of wkhtmltopdf --version): 0.12.6

whtmltopdf provider gem and version if one is used:

platform/distribution and version (e.g. Windows 10 / Ubuntu 16.04 / Heroku cedar): MacOS 14.4.1 (23E224), M1 Pro
@unixmonkey
Copy link
Collaborator

WickedPDF uses wkthmltopdf under the hood, which only supports a small amount of CSS3 stuff, you may need to add another CSS file or <style> tag and use some old-school circa 2010 CSS to add the missing styles.

@patrickking-alx
Copy link

patrickking-alx commented Sep 30, 2024 •
edited
Loading

I'm going through the process of setting Tailwind up to integrate with wicked_pdf. I have it working, but thanks to the limited CSS support there are quite a few quirks.

The most important quirk so far: wicked will only let us link to a stylesheet included in app/assets/stylesheets, and not in some other location like app/assets/build. So, my Tailwind command looks like:

tailwindcss -c tailwind-pdf.config.js --postcss -i ./app/assets/stylesheets/pdf.css -o ./app/assets/stylesheets/builds/pdf.css

And then, in a pdf specific layout:

<%= wicked_pdf_stylesheet_link_tag "builds/pdf.css" %>

Limitations so far:

  • We can't use flexbox, so it's back to laying things out with floats
  • All of the Tailwind text colour helpers use css variables, which are also not supported
  • all: revert isn't supported, so Tailwind's stylings become a very all or nothing proposition

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
wkhtmltopdf
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@unixmonkey @atif @patrickking-alx and others