Rendering Tailwind-styled PDFs from Rails View Templates using Grover

Deloris Thompson
Deloris ThompsonMonday, April 15, 2024
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.


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 = 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 =, # 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 =["preview", ".pdf"], Dir.tmpdir) temp_pdf.write(pdf) temp_pdf.close # Log the temporary file path "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 =, 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


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 anytime.

Additional Resources:

Share this post


Related Posts:

Interested in working with us?

Give us some details about your project, and our team will be in touch with how we can help.

Get in Touch