如何在tailwindcss-rails与importmaps中使用postcss-import？

我新建了一个Rails项目，想在里面使用Tailwind，并且为了代码组织管理方便，需要拆分Tailwind CSS文件。

相关Gem配置 #

Gemfile中的相关依赖如下：

gem "sprockets-rails"
gem "importmap-rails"
gem "tailwindcss-rails"

我执行了bin/importmap pin postcss-import命令，该命令已在config/importmap.rb文件中添加了对应的pin配置。原本以为这样就能让应用的JS文件访问这些Node模块，于是在config/tailwind.config.js中做了如下配置：

Tailwind配置文件内容 #

module.exports = {
  // Tailwind可扫描的文件范围
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './app/views/**/*'
  ],
  plugins: [
    require("postcss-import"),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

CSS文件结构与内容 #

app/assets/stylesheets/application.tailwind.css内容：

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwind/font"

app/assets/stylesheets/tailwind/font.css内容：

@layer base {
  h1 {
    @apply 2xl;
  }
  h2 {
    @apply h2;
  }
}

运行错误 #

执行bin/dev构建CSS时，出现以下错误：

18:00:48 css.1  | Rebuilding...
18:00:48 css.1  | Error: Cannot find module 'postcss-import'
18:00:48 css.1  | Require stack:
18:00:48 css.1  | - /home/zifnab/projects/my_project/config/tailwind.config.js
18:00:48 css.1  |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
18:00:48 css.1  |     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
18:00:48 css.1  |     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
18:00:48 css.1  |     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)
18:00:48 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)
18:00:48 css.1  |     at /home/zifnab/projects/my_project/config/tailwind.config.js:112:5
18:00:48 css.1  |     at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)
18:00:48 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)
18:00:48 css.1  |     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
18:00:48 css.1  |     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6) {
18:00:48 css.1  |   code: 'MODULE_NOT_FOUND',
18:00:48 css.1  |   requireStack: [
18:00:48 css.1  |     '/home/zifnab/projects/my_project/config/tailwind.config.js'
18:00:48 css.1  |   ]
18:00:48 css.1  | }

可以看出，importmaps在CSS构建步骤中未能引入postcss-import模块。我希望尽量不使用yarn包，而是沿用Rails 7的importmaps方式，请问如何让构建步骤识别该模块？

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