How to Set Up a Rails Project with Esbuild and TailwindCSS

Welcome to this comprehensive guide on setting up a Ruby on Rails project with Esbuild and TailwindCSS! If you're looking to create a modern web application with a sleek design and fast build times, you've come to the right place. In this article, we will walk you through the steps to get your Rails project up and running with these powerful tools. Let's dive in!

What You Will Need

Before we start, make sure you have the following installed on your machine:

Ruby: Version 2.7 or higher
Rails: Version 6.0 or higher
Node.js: Version 14 or higher
Yarn: Package manager for JavaScript

Once you have these prerequisites, you are ready to start building your Rails application!

Step 1: Create a New Rails Project

Open your terminal and run the following command to create a new Rails project:

rails new my_rails_app --skip-javascript

Here, we are skipping the default JavaScript setup because we will be using Esbuild instead. Navigate into your new project directory:

cd my_rails_app

Step 2: Add Esbuild to Your Project

Next, we will add Esbuild to our Rails project. Esbuild is a fast JavaScript bundler and minifier that will help us manage our JavaScript assets efficiently.

To add Esbuild, run the following command:

bundle add esbuild

After adding Esbuild, we need to install it. Run the following command:

yarn add esbuild

Now, let's create a build script for Esbuild. Open the package.json file and add the following script:

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
}

This script tells Esbuild to bundle all JavaScript files in the app/javascript directory and output them to the app/assets/builds directory.

Step 3: Set Up TailwindCSS

Now that we have Esbuild set up, let's add TailwindCSS to our project. TailwindCSS is a utility-first CSS framework that allows for rapid UI development.

To install TailwindCSS, run the following command:

yarn add tailwindcss postcss autoprefixer

Next, we need to initialize TailwindCSS. Run the following command:

npx tailwindcss init

This will create a tailwind.config.js file in your project. Now, let's configure TailwindCSS to remove unused styles in production. Open the tailwind.config.js file and update it as follows:

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

Next, we need to create a PostCSS configuration file. Create a file named postcss.config.js in the root of your project and add the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 4: Create Your CSS File

Now that TailwindCSS is set up, let's create a CSS file to include Tailwind's styles. Create a new file named application.css in the app/javascript/stylesheets directory and add the following lines:

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

Step 5: Update Your JavaScript Entry Point

Next, we need to update our JavaScript entry point to include the CSS file we just created. Open the app/javascript/application.js file and add the following line:

import './stylesheets/application.css';

Step 6: Update Your Layout File

Now, let's update the layout file to include the bundled JavaScript. Open the app/views/layouts/application.html.erb file and add the following line before the closing </head> tag:

<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>

Step 7: Build Your Assets

With everything set up, it's time to build your assets. Run the following command in your terminal:

yarn build

This command will bundle your JavaScript and CSS files using Esbuild and TailwindCSS. You should see the output files in the app/assets/builds directory.

Step 8: Start Your Rails Server

Now that your assets are built, you can start your Rails server. Run the following command:

rails server

Open your browser and navigate to http://localhost:3000. You should see your Rails application running with TailwindCSS styles applied!

Step 9: Development Workflow

During development, you will want to automatically rebuild your assets when you make changes. You can do this by running the following command:

yarn build --watch

This command will watch for changes in your JavaScript and CSS files and rebuild them automatically, making your development process smoother.

Conclusion

Congratulations! You have successfully set up a Ruby on Rails project with Esbuild and TailwindCSS. You now have a powerful development environment that allows for rapid UI development and fast asset compilation.

Feel free to explore the features of TailwindCSS and customize your application further. Happy coding!