DEV Community

Cover image for How to Setup Tailwind 3 on Rails 7
Akshay Khot
Akshay Khot

Posted on • Updated on

How to Setup Tailwind 3 on Rails 7

#rails #tailwindcss

Update: Tailwind documentation has since added the installation steps with Rails.

Even though the official Tailwind documentation has installation instructions for various client-side frameworks, it is missing one for Rails. Most of the online tutorials work with the older versions of Tailwind. With version 3 released a few days ago, I thought it'd be nice to have an up-to-date guide for Rails developers trying to set Tailwind 3 on a Rails app, so here it goes.

Step 1: Install Tailwind CSS

Run the following command from the root directory of your Rails application, which installs the Tailwind package.

npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize Tailwind

By default, Tailwind will look for a tailwind.config.js file at the root of your project where you can define any customizations. The following command generates a tailwind.config.js file in your Rails application.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure the source template paths

The content section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names.

Modify the generated tailwind.config.js file to include all the HTML, JS and ERB files under the app directory.

module.exports = {
  content: ["./app/**/*.{html,js,erb}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add Tailwind directives to the CSS

Tailwind is made up of a few different pieces: a reset stylesheet, the utility classes, and functions that make working with Tailwind easier.

In the app/assets/stylesheets/application.css file, add the following Tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 5: Start the Tailwind CLI build process

Run the following command from the root directory of your Rails application. This will watch for the changes in the view files.

npx tailwindcss -i app/assets/stylesheets/application.css -o app/assets/stylesheets/wind.css --watch
Enter fullscreen mode Exit fullscreen mode

Step 6: Add Tailwind to the HTML

Finally, in the application.html.erb file, add the reference to the generated stylesheet file.

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'wind', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
Enter fullscreen mode Exit fullscreen mode

That's it! You have now set up Tailwind in your Ruby on Rails application.

Original Post: How to Setup Tailwind 3 on Rails

Top comments (10)

Collapse
 
z2flow profile image
Z2Flow • • Edited

Hi Akshay,
Thanks for this—very helpful.
I followed this recipe and Tailwind styles were not being honoured.
I then added the following to:
/views/layouts/application_layout.rb:
stylesheet_link_tag "tailwind", "inter-font", data_turbo_track: "reload"

and et voilà.

Collapse
 
alexandrerojon profile image
Alexandre •

Hey Akshay!
Thanks for the setup, super useful and it works perfectly. :) Quick question on step 5 specifically - is there a way to automate this or avoid having to run this command every time?
Thanks in advance :)

Collapse
 
software_writer profile image
Akshay Khot • • Edited

Hey Alexandre,

Thanks for the kind words, I really appreciate it.

Since I posted this article, Tailwind has updated their documentation to include steps for Ruby on Rails. Please check it out.

To answer your original question, yes, you can definitely automate this setup. Take a look at the Foreman project.

When using Foreman, you create a single Procfile, that lists all background processes that need to be started for your application to work. This lets you start your Rails server, database server, Tailwind, Redis, etc. using a single command. Here is a sample Procfile.

Hope that helps.

Akshay

Collapse
 
alexandrerojon profile image
Alexandre •

Thanks Akshay! Appreciate you taking the time to respond to me :)

Collapse
 
bryanbeshore profile image
Bryan Beshore •

Akshay, thanks for putting this together. Wondering if you know how to get the tailwindcss/forms plugin to work with a new rails 7 application?

github.com/tailwindlabs/tailwindcs...

Collapse
 
software_writer profile image
Akshay Khot •

Bryan, thank you for the comment.

You can add the forms plugin in the tailwind.config.js file as follows:

module.exports = {
  content: ["./app/**/*.{html,js,erb}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms')
  ],
}
Enter fullscreen mode Exit fullscreen mode

Reference: Tailwind Plugins

Collapse
 
bryanbeshore profile image
Bryan Beshore •

Aksahy, thank you for the reply.

For some reason, this does not seem to be working.

Added: npm install @tailwindcss/forms as well as the plugin and for some reason I cannot get this to work.

Starting a new project from scratch with a static#home controller... Not sure why this is not working.

Would love to leverage some of the (requires JS) components here: tailwindui.com/

Thread Thread
 
software_writer profile image
Akshay Khot •

Hey Bryan,

Did you restart the Tailwind CLI build process after making changes to the tailwind.config.js file?

The @tailwindcss/forms plugin resets the default form styles to make it easier to style form elements with utility classes. So if you are not seeing any form styles, try adding some form utility classes and see if those show up.

Also, what specific error are you getting with the forms?

Thread Thread
 
bryanbeshore profile image
Bryan Beshore •

Looks like restarting the Tailwind CLI build process made all the difference. Didn't realize that I needed to rerun that each time. Many thanks!

Thread Thread
 
software_writer profile image
Akshay Khot •

Good to know that solved your issue. Glad to help 😀

Read next

mike_andreuzza profile image

How to create an interactive pricing table with Astro, Tailwind CSS, and Alpine.js

Michael Andreuzza -

saim_ansari profile image

How to Use Custom Fonts in Tailwind CSS with Example

saim -

jetthoughts_61 profile image

Upgrading PostgreSQL on Heroku: A Step-by-Step Guide

JT Dev -

d4be4st profile image

Publish/Subscribe with Sidekiq

štef -