Rails 8应用中Tailwind CSS安装失败：CSS资源404错误求助

核心问题分析 #

你的Gemfile同时引入了tailwindcss-ruby（v4.x）和tailwindcss-rails（v3.x），二者功能重叠且版本不兼容，是导致资源加载失败的主要原因。另外Rails 8默认使用Propshaft作为资产管道，资产加载逻辑与旧版Sprockets不同，需对应调整配置。

分步修复步骤 #

1. 移除冲突Gem #

编辑Gemfile，删除以下两行：

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

保留官方适配Rails的版本：

gem "tailwindcss-rails"

执行bundle更新：

./bin/bundle install

2. 针对Propshaft重新初始化Tailwind #

清理旧配置后运行适配命令：

./bin/rails tailwindcss:install:propshaft

该命令会自动生成适配Propshaft的配置文件，包括更新tailwind.config.js、修正CSS导入规则、配置布局文件的资源引用。

3. 修正CSS文件导入格式 #

打开app/assets/stylesheets/application.tailwind.css，确保内容如下（移除多余的@import "tailwindcss";）：

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

/* 自定义组件可放在此处 */
/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

4. 验证布局文件的CSS引用 #

检查app/views/layouts/application.html.erb，确保引用正确的CSS文件：

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

若之前引用的是tailwindcss而非application.tailwind，会直接导致404错误，必须修正为实际文件名。

5. 重启开发服务 #

停止当前./bin/dev进程，重新启动：

./bin/dev

等待服务完全启动后刷新浏览器，验证资源加载状态。

额外排查点 #

• 检查public/assets目录是否生成application.tailwind.css相关编译文件
• 确认config/propshaft.rb中启用了资产管道：

  Rails.application.config.propshaft.enabled = true
  

• 检查config/initializers/assets.rb是否包含Tailwind路径配置：

  Rails.application.config.assets.paths << Rails.root.join("app/assets/stylesheets")
  

内容的提问来源于stack exchange，提问作者Nikolay Lipovtsev