Rails 8能否原生支持多Tailwind配置文件？

不需要额外引入npm包，直接通过Rails自带的Tailwind CLI工具就能实现双配置构建，步骤如下：

1. 创建独立的Tailwind配置文件 #

在项目根目录生成两个配置文件：

• tailwind.config.js：保留原有的Site区域样式配置
• tailwind.admin.config.js：专门针对Admin区域定制主题、内容扫描范围等规则

示例Admin配置文件内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/views/admin/**/*.html.erb',
    './app/helpers/admin/**/*.rb',
    './app/assets/javascripts/admin/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        admin: {
          primary: '#2563eb',
          secondary: '#475569'
        }
      }
    },
  },
  plugins: [],
}

2. 修改Procfile.dev配置双监听任务 #

将原有的单CSS监听任务拆分为两个，分别指定对应配置文件和输出路径：

web: bin/rails server -p 3000
css: bin/rails tailwindcss:watch --config tailwind.config.js --output app/assets/builds/site.css
css_admin: bin/rails tailwindcss:watch --config tailwind.admin.config.js --output app/assets/builds/admin.css
js: bin/rails js:watch

3. 注册预编译资产 #

在config/initializers/assets.rb中添加两个CSS文件到预编译列表，确保Rails能正确识别并处理：

Rails.application.config.assets.precompile += %w( site.css admin.css )

4. 对应布局引入专属CSS #

• Site区域布局（比如app/views/layouts/application.html.erb）引入Site样式：

<%= stylesheet_link_tag "site", "data-turbo-track": "reload" %>

• Admin区域布局（比如app/views/layouts/admin/application.html.erb）引入Admin样式：

<%= stylesheet_link_tag "admin", "data-turbo-track": "reload" %>

5. 启动验证 #

执行bin/dev启动服务，此时两个Tailwind监听进程会分别扫描对应区域的文件、读取专属配置，编译出完全独立的CSS文件，实现Admin和Site样式的彻底隔离。

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