As you know Tailwind CSS is a popular utility-first CSS framework that helps you build modern and responsive web designs quickly.

This guide will walk you through how to install Tailwind CSS in Ruby on Rails with easy-to-follow steps, perfect for beginners.

Integrating Tailwind CSS with Ruby on Rails enhances your ability to design visually appealing and responsive web applications. Tailwind's utility classes make it easier to implement consistent styling, reduce CSS bloat, and speed up the development process.

Prerequisites

Before you begin, ensure you have the following installed on your machine:

  • Make sure you have a Rails application set up. If not, you can create one using rails new myapp.
  • Tailwind CSS requires Node.js and Yarn for managing dependencies. You can install them from Node.js and Yarn.

Step-by-Step Installation Guide

Follow these steps to install Tailwind CSS in your Ruby on Rails application:

Step 1: Add Tailwind CSS to Your Rails App

Open your terminal and navigate to your Rails project directory. Run the following command to add Tailwind CSS using Yarn:

bash
yarn add tailwindcss
Step 2: Initialize Tailwind CSS

Next, initialize Tailwind CSS by creating its configuration file. Run:

bash
npx tailwindcss init

This command generates a tailwind.config.js file in your project root, which you can customize later if needed.

Step 3: Configure Tailwind to Remove Unused Styles in Production

To optimize your CSS for production, configure Tailwind to remove unused styles. Open the generated tailwind.config.js file and set the purge option:

javascript
module.exports = {
  purge: [
    './app/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

This configuration ensures that Tailwind removes any unused CSS, keeping your final build lightweight.

Step 4: Create Tailwind CSS File

Create a new CSS file for Tailwind. Inside app/assets/stylesheets/, create a file named tailwind.css and add the following lines:

css
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Import Tailwind CSS in Your Application

Open app/assets/stylesheets/application.css and remove all existing content. Then, import your new tailwind.css file by adding:

css
/*
 *= require tailwind
 */

Read More:
How Ruby on Rails Works
How to Host Rails Apps for Free
Rails 8.0 Release Highlights

Step 6: Update Webpack Configuration

To ensure Tailwind processes your CSS correctly, update your Webpack configuration. Open config/webpack/environment.js and add the following:

javascript
const { environment } = require('@rails/webpacker')
const tailwindcss = require('tailwindcss')

environment.loaders.append('postcss', {
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            tailwindcss('./tailwind.config.js'),
            require('autoprefixer'),
          ],
        },
      },
    },
  ],
})

module.exports = environment
Step 7: Restart Your Rails Server

After setting everything up, restart your Rails server to apply the changes:

bash
rails server
Step 8: Verify Tailwind Installation

To confirm that Tailwind CSS is working, add a Tailwind class to one of your views. For example, open app/views/layouts/application.html.erb and modify the <body> tag:

html
<body class="bg-gray-100">
  <%= yield %>
</body>

Reload your Rails application in the browser. You should see the background color change to a light gray, indicating that Tailwind CSS is successfully installed.

Installing Tailwind CSS in Ruby on Rails is a straightforward process that can significantly improve your application's frontend design. Tailwind's utility-first approach, combined with Rails' powerful backend, creates a robust environment for building modern and responsive web applications.

Let me know the feedback in the comment below.

Comments(0)