Rails 6.1.3环境下安装Tailwind CSS 2.0出现编译与路由报错的问题

第一步：调整资产文件位置，解决Sprockets解析冲突 #

当前Webpacker管理的CSS文件放在Sprockets默认资产目录下，直接导致Sprockets把@import "tailwindcss/base"当成静态资源请求，触发路由错误：

• 将原app/assets/stylesheets/application.css 移动到app/javascript/stylesheets/application.css（无对应文件夹就手动新建）
• 保留文件内原有三行@import内容即可，无需修改：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

第二步：修正application.js的引入路径 #

移动文件后原相对路径会失效，打开app/javascript/packs/application.js：

• 删掉原有的css引入行：require("../../assets/stylesheets/application.css")
• 替换为正确路径：import '../stylesheets/application.css'

第三步：修正postcss.config.js的插件顺序与配置 #

现有插件顺序完全颠倒：postcss-import负责解析@import语句、从node_modules查找依赖，必须放在插件链最前面，否则根本定位不到tailwind的包路径。同时需要给postcss-import指定node_modules查找路径：
替换postcss.config.js全部内容为：

module.exports = {
  plugins: [
    // 优先执行postcss-import，解析所有@import路径，从node_modules匹配依赖
    require('postcss-import')({
      path: ['node_modules']
    }),
    // 再执行tailwind核心插件
    require('tailwindcss')('./tailwind.config.js'),
    // 后续插件按原规则执行
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

注意：你的package.json依赖列表中没有显式安装postcss-import，先执行npm install postcss-import@14 --save-dev安装兼容PostCSS7的对应版本，避免依赖缺失。
额外提示：package.json里的postcss-cssnext已停止维护，和postcss-preset-env功能完全重叠，如果修完上述步骤仍有解析异常，可直接移除该依赖，避免插件冲突。

第四步：修正页面模板的资产标签 #

当前同时加载Sprockets的CSS和Webpacker打包的CSS，残留的Sprockets标签会触发旧路径的请求错误：
打开app/views/layouts/application.html.erb，删掉这行：

<%= stylesheet_link_tag 'application', media: 'all' %>

保留另外两个标签即可：

<%= javascript_pack_tag 'application' %>     
<%= stylesheet_pack_tag 'application', media: 'all' %>

第五步：检查tailwind.config.js配置 #

确认项目根目录存在tailwind.config.js，如果没有就新建，适配Tailwind2的基础配置如下：

module.exports = {
  // 配置purge扫描路径，匹配所有使用Tailwind类的文件
  purge: [
    './app/views/**/*.html.erb',
    './app/javascript/**/*.js'
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最终验证流程 #

• 清空tmp/cache目录下的缓存，重启本地Rails服务
• 重新执行bin/webpack，确认无tailwind路径找不到的报错
• 页面上测试一个基础Tailwind类（比如给任意标签加bg-blue-500），确认样式正常生效

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