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

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

Discussion (9)

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 Author • Edited on

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 Author

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 Author

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 Author

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