DEV Community: Jonathan Hooper

Setting Up Tailwind CSS in a New Rails 8 App

Jonathan Hooper — Fri, 28 Mar 2025 14:02:37 +0000

Recently, I needed to get Tailwind CSS running on a new Rails 8 app. Here’s how I got everything set up!

1. Create Your Rails App

Start by creating a new Rails app using the rails new command:

rails new tailwindcss_demo

Rails provides a shortcut by allowing you to pass the --css=tailwind option to rails new, which automatically sets up Tailwind. However, in my case, I already had a working Rails app and needed to add Tailwind manually. That’s what I’ll focus on here.

2. Install the Required Gems

The tailwindcss-rails gem provides all the necessary tooling to integrate Tailwind into a Rails app. Add it to your Gemfile and run bundle install:

# Gemfile
gem "tailwindcss-rails"

bundle install

3. Run the Tailwind Install Task

Next, run the Tailwind install task to set up the necessary files:

bin/rails tailwindcss:install

This command generates several files, including:

Tailwind Stylesheet

In app/assets/stylesheets/application.tailwind.css, you'll find the main Tailwind CSS file where you can add your styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

Tailwind Configuration

The install script also generates a Tailwind configuration file at config/tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    // require('@tailwindcss/forms'),
    // require('@tailwindcss/typography'),
    // require('@tailwindcss/container-queries'),
  ]
};

4. Running Tailwind in Development

The installation process also sets up a tailwind:watch task. This process runs alongside your Rails server and automatically rebuilds your frontend assets when changes are detected.

To start your Rails app with Tailwind watching for changes, use:

foreman start

The Tailwind install script will have added this process to your Procfile, ensuring that both your Rails server and the tailwind:watch task run together.

Conclusion

Setting up Tailwind CSS in a Rails app is straightforward, thanks to the tailwindcss-rails gem. If you're creating a new app, you can simplify the process by using rails new myapp --css=tailwind, which takes care of everything out of the box. However, if you’re adding Tailwind to an existing app, the steps above will get you up and running quickly!

Using Chromedriver to create PDFs with ruby

Jonathan Hooper — Thu, 27 Mar 2025 00:26:55 +0000

Generating PDFs from HTML is a common challenge in web development, especially when maintaining precise layouts and styling. Whether it's invoices, reports, or dynamically generated documents, developers need reliable tools to convert HTML to PDFs accurately. There are many tools out there to solve it. Recently, I worked on html2pdf_chrome, a Ruby gem that wraps ChromeDriver to generate PDFs, and I learned a lot in the process.

There are plenty of libraries for generating PDFs from HTML, including wkhtmltopdf and Puppeteer. However, Chrome’s built-in printing capabilities often produce more accurate results, especially for modern web layouts that rely on CSS Grid, flexbox, and web fonts. ChromeDriver provides programmatic access to this functionality, allowing us to script PDF generation.

Installing Chromedriver

Obviously using Chromedriver means installing Chromedriver. It can be installed with most package managers (e.g. Homebrew):

brew install chromedriver

A simple approach

To manage the interface with Chromedriver I used Selenium. Here's a simple example of using Selenium to generate a PDF from HTML:

require 'base64'
require 'selenium-webdriver'

# Create an options object for starting Chromedriver
options = Selenium::WebDriver::Chrome::Options.new
options.add_argument('--headless=new')
options.add_argument('--disable-gpu')
options.add_argument('--no-sandbox')
options.add_argument('--disable-software-rasterizer')

# Create a Chromedriver instance
driver = Selenium::WebDriver.for(:chrome, options: options)

# Create a data URL for the html string
html_string = "<h1>This will be a PDF soon</h1>"
encoded_html = Base64.strict_encode64(html_string)
data_url = "data:text/html;base64,#{encoded_html}"

# Visit the data URL and get the rendered PDF
driver.navigate.to(data_url)
cdp_response = driver.execute_cdp('Page.printToPDF')
pdf_data = Base64.decode64(cdp_response['data'])

# Save the PDF!
File.write("output.pdf", pdf_data)

Productionization

Creating the driver with Selenium starts a ChromeDriver process, which can be resource-intensive and takes time to initialize. This can be slow and expensive. It will be better for us to create a single driver instance once and then re-use it multiple times.

In a multi-threaded environment, multiple threads may attempt to generate PDFs simultaneously. We need to control access to the driver to prevent interference. I did that in the html2pdf_chrome gem. An abbreviated example of what that looks like is below:

# Create a function for creating a driver.
def initialize_driver
  options = Selenium::WebDriver::Chrome::Options.new
  options.add_argument('--headless=new')
  options.add_argument('--disable-gpu')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-software-rasterizer')

  Selenium::WebDriver.for(:chrome, options: options)
end

# Create a function for fetching a singleton driver with a Mutex
def fetch_driver
  @driver ||= initialize_driver
  @semaphore ||= Mutex.new
  @semaphore.synchronize do
    yield @driver
  end
  nil
end

# Encode the HTML like before
html_string = "<h1>This will be a PDF soon</h1>"
encoded_html = Base64.strict_encode64(html_string)
data_url = "data:text/html;base64,#{encoded_html}"

# Get the driver and use it to generate the PDF
pdf_data = nil
fetch_driver do |driver|
  driver.navigate.to(data_url)
  cdp_response = driver.execute_cdp('Page.printToPDF')
  pdf_data = Base64.decode64(cdp_response['data'])
end

# Save the PDF!
File.write("output.pdf", pdf_data)

Conclusion

Using ChromeDriver with Selenium to generate PDFs from HTML works well and turns out to be surprisingly easy. The hardest part is installing Chromedriver. If you want to do this in production make sure to control access to the driver to enable concurrent PDF generation in multi-threaded environments. You could also just use the gem I wrote that does it all for you 🙂

How to write on a PDF with Ruby using Prawn

Jonathan Hooper — Thu, 30 Jan 2025 16:26:53 +0000

If you’ve ever needed to programmatically add text to a PDF in Ruby, then you know how tricky it can be. PDFs are complex, and finding tools that are both effective and up-to-date can be a challenge. Many guides rely on deprecated tools or outdated information. In this post, I'll walk through a solution I came up with using two tools:

Prawn: The fast, nimble PDF writer for Ruby
CombinePDF: The Ruby gem that combines PDFs

My approach looks like this:

Create a new overlay PDF with the text I want on my existing PDF using Prawn
Use CombinePDF to overlay the new PDF over the existing one so the text appears in the correct spot

This two-step approach is necessary because Prawn excels at creating new PDFs but does not support modifying existing ones. Meanwhile, CombinePDF makes it easy to manipulate and merge existing PDFs. By combining these tools, you get the best of both worlds—precision in adding text and flexibility in working with existing documents.

Create a New Overlay PDF Using `Prawn`

Using Prawn is pretty straightforward. The Prawn manual has a bunch of helpful tips about what its PDF DSL can do. That is where you want to start to figure out how to arrange text, manipulate pages, and work with shapes.

As an example, getting things going looks like this:

document = Prawn::Document.new
document.text_box "Hello, world", at: [20, 650], width: 200
document.start_new_page
document.text_box "Some other words", at: [30, 500], width: 300

Overlay the New PDF Over the Existing One

To overlay the new PDF, you need to take three steps:

Create a base PDF to hold your result: This acts as a container for the final combined document.
Load your existing PDF and add it to the base PDF: This ensures that the original content remains intact and serves as the foundation for the overlay.
Add your overlay PDF to the base PDF: This step places your new content in the correct position over the existing content, completing the merge.

That all comes together to look like this:

require 'combine_pdf'
require 'prawn'

# Let's create our base PDF to hold our result
output_pdf = CombinePDF.new

# Now let's read the PDF we want to write on and add it to the result
existing_pdf = CombinePDF.load('/path/to/existing.pdf')
existing_pdf.pages.each do |existing_pdf_page|
  output_pdf << existing_pdf_page
end

# Let's use Prawn to create our overlay
overlay_document = Prawn::Document.new
overlay_document.text_box "Hello, world", at: [20, 650], width: 200

# Now we'll add the pages of our overlay PDF to our base PDF
overlay_pdf = CombinePDF.parse(overlay_document.render)
overlay_pdf.pages.each_with_index do |overlay_pdf_page, index|
  if output_pdf.pages[index]
    output_pdf.pages[index] << overlay_pdf_page
  else
    raise "Overlay PDF has more pages than the existing PDF."
  end
end

# Finally, we'll render the result
output_pdf.save('output.pdf')

DEV Community: Jonathan Hooper

Setting Up Tailwind CSS in a New Rails 8 App

1. Create Your Rails App

2. Install the Required Gems

3. Run the Tailwind Install Task

Tailwind Stylesheet

Tailwind Configuration

4. Running Tailwind in Development

Conclusion

Using Chromedriver to create PDFs with ruby

Installing Chromedriver

A simple approach

Productionization

Conclusion

How to write on a PDF with Ruby using Prawn

Create a New Overlay PDF Using Prawn

Overlay the New PDF Over the Existing One

Create a New Overlay PDF Using `Prawn`