Rails开发环境中新TailwindCSS类无法自动编译的问题排查

核心问题 #

你遇到的情况是因为开发环境下使用了生产模式的资源构建命令，且残留了预编译的资源文件，导致Tailwind的JIT（即时编译）模式无法实时扫描新增的类并更新样式。

具体修复步骤 #

1. 修正Procfile中的开发环境命令 #

你的Procfile里的js命令用了yarn build --watch，这是生产环境的构建命令（会生成压缩、优化后的资源），开发环境应该用yarn dev启动实时的ESBuild监听。同时确认css命令保留带--watch的Tailwind编译命令：

修改后的Procfile：

web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0
worker: bundle exec sidekiq
js: yarn dev
css: yarn build:css --watch

2. 清理残留的预编译资源 #

之前执行的rails assets:precompile会在public/assets目录生成预编译资源文件，Rails开发环境会优先加载这些文件，导致实时编译的样式无法生效。执行以下命令清理：

rails assets:clobber

3. 确认Tailwind配置的扫描路径 #

检查tailwind.config.js中的content数组，确保它包含所有可能使用Tailwind类的文件路径，比如：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/views/**/*.html.erb",
    "./app/components/**/*.{erb,rb}",
    "./app/javascript/**/*.js",
    "./app/assets/javascripts/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

如果新增的类在未被包含的文件里，Tailwind的JIT模式不会扫描到，也就不会生成对应的样式。

4. 重启开发服务 #

清理完资源并修改Procfile后，重启所有服务（web、js、css进程），之后新增Tailwind类时，Tailwind会实时扫描文件并更新样式，无需再手动执行预编译命令。

为什么生产环境正常？ #

Kamal部署时会自动执行生产环境的资源预编译，此时Tailwind会扫描所有指定路径的文件，一次性生成所有用到的类的样式，所以新增的类会被包含进去，不会出现问题。

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