Unable to Install Tailwind on Rails 8 App

When working with Rails 8 and Tailwind CSS v4, many developers face issues like missing styles, 404 errors for Tailwind assets, or conflicts due to outdated setup commands. Below are the key reasons and the solutions.

1. Problem: 404 Asset Error

Error message:

GET http://127.0.0.1:3000/assets/tailwindcss net::ERR_ABORTED 404 (Not Found)

This happens because in Rails 8, Tailwind files are placed in a new directory structure. If you are looking for styles in the old application.tailwind.css path, Rails cannot find them.

2. Correct File Paths in Rails 8

• Input file: app/assets/tailwind/application.css
• Output file (compiled): app/assets/builds/tailwind.css

In your Rails layout (app/views/layouts/application.html.erb), you should include the compiled CSS like this:

<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

3. Use the New Tailwind Import

Older versions used:

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

In Tailwind v4, you should replace these with:

@import "tailwindcss";

This avoids conflicts with the new Rails 8 asset pipeline (Propshaft).

4. Installation Steps

Run the following commands in your project root:

bin/bundle add tailwindcss-rails
bin/rails tailwindcss:install

This generates the config, sets up the correct asset paths, and creates a Procfile.dev.

5. Run Tailwind Watcher

To make Tailwind compile on file changes, start the watcher with:

bin/rails tailwindcss:watch

Or run everything together (Rails + Tailwind watcher) using:

bin/dev

6. Optional: Auto-run Tailwind with Puma

In config/puma.rb, add:

plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"

This way, just running rails server will also start the Tailwind watcher.

7. Why This Happens in Rails 8

• Rails 8 introduced Propshaft as the default asset pipeline.
• Tailwind v4 changed its setup to be CSS-first (@import) instead of directives (@tailwind).
• Old documentation and guides often reference outdated file names like application.tailwind.css.

Final Working Setup

Ensure you have app/assets/tailwind/application.css with:

@import "tailwindcss";

Ensure application.html.erb includes:

<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

Run bin/dev to start both Rails and Tailwind watchers.

This setup will fix the “Unable to install Tailwind CSS in Rails 8 App” issue and ensure your styles compile and load correctly.

Also Read:

Best Ruby On Rails Gems