Tailwind CSS 404 Error on Rails 8 App Despite Following Official Installation Instructions

I followed the official guide from https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails to set up Tailwind CSS on my Rails 8 app, but I encounter a 404 error when the browser tries to load the CSS asset.

Here are the steps I took:

1. Created the project:

RUBYCopied
rails new test_app
cd my-project

2. Installed Tailwind CSS:

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

3. Imported Tailwind CSS in application.tailwind.css:

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

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

4. Generated a Pages controller with a home action:

RUBYCopied
rails g controller pages home

5. Started the build process:

BASHCopied
./bin/dev

However, Google Chrome reports that it cannot find the CSS:

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

The Gemfile includes both tailwindcss-ruby and tailwindcss-rails gems, which might be conflicting. Below is my Gemfile for reference:

RUBYCopied
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"

I suspect either a naming mismatch in the stylesheet link tag or a conflict between the two Tailwind gems might be causing the issue. Any insights or suggestions to resolve this would be appreciated.