Rendering Tailwind-styled PDFs from Rails View Templates using Grover

In this tutorial, we'll dive into the process of rendering Tailwind CSS-styled PDFs directly from Rails view templates using Grover. By following these steps, you'll be able to seamlessly integrate Tailwind CSS into your PDF documents while retaining the flexibility of Rails view rendering.

Prerequisites:

Before we begin, make sure you have the following prerequisites:

• Basic knowledge of Rails
• Installed Tailwind CSS and Grover gems
• Access to an existing or new Rails application
• Run all commands in the desired projects folder

Step 1: Creating the Tailwind PDF Stylesheet

To get started, let's create a new Tailwind CSS stylesheet specifically for PDFs. Open your terminal and run the following command:

touch public/tailwind_pdf.css

Step 2: Configuring Grover for Rails View Templates

Next, configure Grover in your Rails controller to render the PDF directly from a view template. Here's a sample code snippet to guide you:

 # Render the view template to PDF
 view = ApplicationController.new.view_context
 
  html = view.render({
    # Point to the template or partial you want to use
    partial: "",
    # pass any locals you need
    locals: {}
  })

  # Generate the PDF using Grover
  pdf = Grover.new(html,
    # You can change the format to A3, A4, A5, Legal, Letter, Tabloid
    format: "A4",
    puppeteer: { args: ["--no-sandbox"] }
    ).to_pdf

    # Create a temporary file to store the PDF
    temp_pdf = Tempfile.new(["preview", ".pdf"], Dir.tmpdir)
    temp_pdf.write(pdf)
    temp_pdf.close

    # Log the temporary file path
    Rails.logger.info "PDF file created at #{temp_pdf.path}"

    # Return the path of the temporary file
    temp_pdf.path

Step 3: Adding Tailwind through a style tag

We can add style tags to our PDF by passing an array of style tag options to style_tag_options and including our new tailwind_pdf.css file. Let's update Grover to use it, we can also add printBackground if our page contains background graphics.

# Exisiting code
pdf = Grover.new(html,
        format: "A4",
        printBackground: true,
        style_tag_options: [{ path: "public/tailwind_pdf.css" }],
        puppeteer: {
          args: ["--no-sandbox"]
        }).to_pdf
# Exisiting code

Step 4: Recompiling Tailwind CSS

The tailwindcss-rails gem creates an input file that generates an output file containing the CSS in app/assets/builds/tailwind.css. Running rails tailwindcss:build or rails assets:precompile updates that output file and is the same CSS used in our application. Let’s update our Tailwind.css file by running rails assets:precompile and copy it to the Tailwind PDF stylesheet. Run the following command in your terminal:

bundle exec rails assets:precompile

# This should point to where you are compiling assets
cp public/packs/tailwind.css public/tailwind_pdf.css

Conclusion:

Following these steps, you can render Tailwind CSS-styled PDFs directly from Rails view templates using Grover. This approach allows you to maintain consistent styling across your web application and PDF documents, providing a seamless user experience.

Deloris Thompson is a senior software engineer at Echobind. Want to work with her and the entire team? Don’t hesitate to reach out at hi@echobind.com anytime.

Additional Resources:

• Tailwind CSS Documentation

• Grover Documentation