Search code examples
ruby-on-railstailwind-csstailwind-css-4

Unable to install Tailwind on Rails 8 App

I do everything according to the official instructions from https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails:

Create your project:

rails new test_app
cd my-project

Install Tailwind CSS:

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

Import Tailwind CSS to application.tailwind.css:

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

Generate Pages Controller:

rails g controller pages home

Start your build process:

./bin/dev

Google Chrome reports that it cannot find CSS:

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

enter image description here

enter image description here

Gemfile:

source "https://rubygems.org"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 8.0.1"
# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
gem "propshaft"
# Use sqlite3 as the database for Active Record
gem "sqlite3", ">= 2.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"
# 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"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ windows jruby ]

# Use the database-backed adapters for Rails.cache, Active Job, and Action Cable
gem "solid_cache"
gem "solid_queue"
gem "solid_cable"

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
gem "kamal", require: false

# Add HTTP asset caching/compression and X-Sendfile acceleration to Puma [https://github.com/basecamp/thruster/]
gem "thruster", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri windows ], require: "debug/prelude"

  # Static analysis for security vulnerabilities [https://brakemanscanner.org/]
  gem "brakeman", require: false

  # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
  gem "rubocop-rails-omakase", require: false
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

gem "tailwindcss-ruby", "~> 4.0"

gem "tailwindcss-rails", "~> 3.3"
Solution

  • Deprecated: @tailwind directive

    The @tailwind directive will be deprecated starting from v4. Instead, the @import "tailwindcss" declaration is introduced. Do not use them together, only @import "tailwindcss" will be needed from v4 onward.

    Default CSS-fist configuration instead of legacy JavaScript-based

    Also probably need to re-evaluate how this is handled in compile_command. It seems like the config option is ignored if the file doesn't exist, so that didn't cause any issues with the upgrade for me.

    Source: (rails/tailwindcss-rails) #450: TailwindCSS v4 - upgrade experience report

    Starting from TailwindCSS v4, CSS-first configuration is supported. If you still want to use the legacy JavaScript-based configuration, you can set the configuration file using the @config CSS directive.

    @import "tailwindcss";
@config "../../config/tailwind.config.js";

    Or you can completely drop the JS-based configuration and use the new CSS directives for individual settings.

    TailwindRails suggests upgrade tasks

    Here's a detailed list of what the upgrade task does.

    • Cleans up some things in the generated config/tailwind.config.js.
    • If present, moves config/postcss.config.js to the root directory.
    • If present, moves app/assets/stylesheets/application.tailwind.css to app/assets/tailwind/application.css.
    • Removes unnecessary stylesheet_link_tag "tailwindcss" tags from the application layout.
    • Removes references to the Inter font from the application layout.
    • Runs the upstream upgrader (note: requires npx to run the one-time upgrade, but highly recommended).
    • Upgrade steps - TailwindRails how to upgrade TailwindCSS v3 to v4