Rails 7 + Tailwind：如何实现文件保存时自动预编译资产？

1. 检查Tailwind配置文件 #

确保tailwind.config.js的content数组包含所有存放视图、组件、JS文件的路径，这样Tailwind才能扫描到你新增的CSS类：

/** @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: [],
}

2. 确认bin/dev的进程配置 #

打开Procfile.dev，确保包含Tailwind的监听进程：

web: bin/rails server -p 3000
css: yarn build:css --watch

yarn build:css --watch会自动监听文件变化，重新编译Tailwind CSS，无需手动执行rails assets:precompile。如果你的Procfile里没有这个进程，添加上后重启bin/dev即可。

3. 清理预编译的静态资产（若之前执行过） #

如果之前在开发环境执行过rails assets:precompile，会生成public/assets目录下的静态文件，Rails会优先加载这些文件，导致新样式不生效。执行以下命令清理：

rails assets:clobber

之后重启bin/dev，开发模式下就会动态生成样式文件。

4. 确认开发环境配置 #

检查config/environments/development.rb，确保以下配置正确：

config.assets.debug = true
config.assets.compile = true # 确保开发环境允许动态编译资产
config.public_file_server.enabled = true

完成以上设置后，当你新增Tailwind类并保存文件时，Tailwind会自动重新编译CSS，刷新页面就能看到效果，无需手动预编译或重启bin/dev。

内容的提问来源于stack exchange，提问作者Benjamin J. B.