Setting Up a Rails 8 with Vite and Tailwind CSS 4

Yatish Mehta — Wed, 05 Mar 2025 08:00:00 +0000

This guide will walk you through setting up a new Ruby on Rails 8 application using Vite(Vite Ruby) as the asset pipeline and Tailwind CSS v4 for styling.

Creating a New Rails Project

Since we will be using Vite as our asset pipeline, we will create a new Rails app without JavaScript:

rails new --skip-javascript my_app_name

Next, add the required gems for Turbo, Stimulus, and Vite in the Gemfile:

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Vite.js integration in Ruby web apps [https://vite-ruby.netlify.app/]
gem "vite_rails"

Create a package.json file using yarn init

Alternatively, you can manually create package.json with the following content:

{
  "name": "my_app_name",
  "private": "true",
}

Run bundle to install these gems.

Note: Rails 8 uses Propshaft by default, which adds app/assets. Since we are using Vite as our primary asset pipeline, Propshaft can be removed unless needed for other gems like mission control.

Setting Up Vite

Generate Vite configuration files using the vite_rails gem

bundle exec vite install

This will create:

vite.config.mts
config/vite.json
app/frontend/ (the home for all frontend-related assets)

The app/frontend/entrypoints/ directory contains files acting as entry points for JavaScript and stylesheets. These are referenced in app/views/layouts/application.html.erb using vite_javascript_tag.

Install Vite Plugins

Add the Vite Rails plugin and Rollup:

yarn add -D vite-plugin-rails rollup

Update vite.config.mts to load the plugin:

import { defineConfig } from "vite";
import ViteRails from "vite-plugin-rails";

export default defineConfig({
  plugins: [
    ViteRails({
      envVars: { RAILS_ENV: "development" },
      envOptions: { defineOn: "import.meta.env" },
      fullReload: {
        additionalPaths: ["config/routes.rb", "app/views/**/*"],
        delay: 300,
      },
    }),
  ],
  build: { sourcemap: false },
});

Setting Up Turbo & Stimulus

Since we created the app with --skip-javascript, the default app/javascript folder is missing. We need to create it temporarily:

mkdir -p app/javascript && touch app/javascript/application.js

Install Turbo

bin/rails turbo:install

Install Stimulus

bin/rails stimulus:install

Now, move the javascript folder to app/frontend:

mv app/javascript app/frontend

Update the entry point in app/frontend/entrypoints/application.js:

import "../javascript/application";

Your file structure should now look like this:

app/frontend
├── entrypoints
│   └── application.js
├── javascript
│   ├── application.js
│   └── controllers
│       ├── application.js
│       ├── hello_controller.js
│       └── index.js

Setting Up Tailwind CSS v4

Tailwind CSS v4 comes with a dedicated Vite plugin. Install it:

yarn add -D tailwindcss @tailwindcss/vite

Update vite.config.mts

Modify vite.config.mts to include the Tailwind plugin:

import { defineConfig } from "vite";
import ViteRails from "vite-plugin-rails";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
    ViteRails({
      envVars: { RAILS_ENV: "development" },
      envOptions: { defineOn: "import.meta.env" },
      fullReload: {
        additionalPaths: ["config/routes.rb", "app/views/**/*"],
        delay: 300,
      },
    }),
  ],
  build: { sourcemap: false },
});

Add Tailwind to Stylesheets

Create app/frontend/entrypoints/application.css and import Tailwind:

@import "../stylesheets/application.tailwind.css";

Then, create app/frontend/stylesheets/application.tailwind.css and add:

@import "tailwindcss";

@source "../../../app/views/**/*.html.erb";
@source "../../../app/views/**/*.rb";
@source "../../../app/helpers/**/*.rb";

Finally, update application.html.erb to load the stylesheet:

<%= vite_stylesheet_tag "application.css" %>

Final File Structure

app/frontend

├── entrypoints

│   ├── application.css

│   └── application.js

├── javascript

│   ├── application.js

│   └── controllers

│       ├── application.js

│       ├── hello_controller.js

│       └── index.js

└── stylesheets

    └── application.tailwind.css

Wrapping up

Now, you have a Rails 8 app set up with Vite and Tailwind CSS v4. 🎉

If you are looking for a Rails template/SaaS starter based on this stack, check out: https://github.com/yatish27/shore

DEV Community: Yatish Mehta