如何在tailwind.config.js中配置Gem视图组件路径及实现安装自动添加？

一、Gem组件的正确路径配置 #

你写的my_gem/app/components/**/*.rb只是本地开发Gem时的路径，等Gem安装到宿主项目后，组件实际会放在宿主项目的vendor/bundle/ruby/[Ruby版本]/gems/[你的Gem名]-[版本号]/app/components/**/*.rb，硬编码这种固定路径肯定行不通。

正确的做法是在宿主项目的tailwind.config.js里动态获取Gem的安装路径，比如借助Node.js的child_process执行Ruby命令来拿到路径：

const { execSync } = require('child_process');
// 把your_gem_name换成你的Gem实际名称
const gemPath = execSync('bundle show your_gem_name').toString().trim();

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
    './app/components/**/*.rb',
    `${gemPath}/app/components/**/*.rb`
  ]
}

这样不管Gem安装在宿主项目的哪个位置，都能准确识别到组件文件。

二、安装时自动添加路径的方法 #

没有完全自动的“安装Gem就自动改配置”的方式（Bundler不允许Gem直接修改宿主项目的文件），但可以通过以下方式帮用户简化操作：

• 做一个Rails生成器：在Gem里写个安装生成器，用户运行rails generate your_gem:install时，生成器会自动修改宿主项目的tailwind.config.js，把动态获取Gem路径的代码插入到content数组中。
• 提供配置脚本：在Gem的bin目录下放一个脚本，用户执行bundle exec your_gem_setup_tailwind，脚本会自动读取并修改tailwind.config.js，添加对应的路径配置。
• 文档里放一键复制的代码块：把完整的带动态路径的tailwind.config.js示例放在README里，让用户直接替换自己的配置文件，或者粘贴对应的内容块。

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