Unable to install Tailwind on Rails 8 App - Stack Overflow

admin管理员组

文章数量:1308623

I do everything according to the official instructions from :

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)

Gemfile:

source ";

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 8.0.1"
# The modern asset pipeline for Rails []
gem "propshaft"
# Use sqlite3 as the database for Active Record
gem "sqlite3", ">= 2.1"
# Use the Puma web server []
gem "puma", ">= 5.0"
# Use JavaScript with ESM import maps []
gem "importmap-rails"
# Hotwire's SPA-like page accelerator []
gem "turbo-rails"
# Hotwire's modest JavaScript framework []
gem "stimulus-rails"
# Build JSON APIs with ease []
gem "jbuilder"

# Use Active Model has_secure_password [.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 []
gem "kamal", require: false

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

# Use Active Storage variants [.html#transforming-images]
# gem "image_processing", "~> 1.2"

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

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

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

group :development do
  # Use console on exceptions pages []
  gem "web-console"
end

group :test do
  # Use system testing [.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

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

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

I do everything according to the official instructions from https://tailwindcss/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)

Gemfile:

source "https://rubygems."

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

# Use Active Model has_secure_password [https://guides.rubyonrails./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.]
gem "kamal", require: false

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

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

group :development, :test do
  # See https://guides.rubyonrails./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./]
  gem "brakeman", require: false

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

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

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

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

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

• ruby-on-rails
• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Feb 2 at 7:35 rozsazoltan 9,44555 gold badges1919 silver badges4343 bronze badges asked Feb 1 at 22:14 Nikolay LipovtsevNikolay Lipovtsev 67911 gold badge66 silver badges1515 bronze badges 1

• How's the CSS imported into the app/views/layouts/application.html.erb` page? it should be something like this: <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> also, can you post the application.css and the scripts on package.json? – Luiz E. Commented Feb 1 at 22:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.

• Removed @tailwind directives - TailwindCSS v3 to v4

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.

• How to setting Tailwind CSS v4 global class? - StackOverflow

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

本文标签： Unable to install Tailwind on Rails 8 AppStack Overflow