Nx管理的Next.js项目中TS版Tailwind Config集成PostCSS报错求助

问题原因 #

NX默认构建/开发流程未自动识别Tailwind的TS格式配置文件，Node.js以CommonJS模式加载时无法解析ES模块的import语法，导致报错。而直接用create-next-app创建的项目，Next.js内置了对tailwind.config.ts的处理逻辑，因此无此问题。

解决方案 #

1. 安装必要依赖 #

确保项目已安装ts-node（用于在Node.js中运行TS代码）和类型定义：

npm install -D ts-node @types/node

2. 修改postcss.config.js #

让PostCSS通过ts-node加载TS格式的Tailwind配置：

// 注册ts-node，将TS文件转为Node.js可识别的格式
require('ts-node').register({
  compilerOptions: {
    module: 'CommonJS'
  }
});

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.ts' },
    autoprefixer: {},
  },
};

3. 调整NX项目配置（project.json） #

在项目的project.json中，为build、serve等目标添加环境变量，确保Node.js正确处理ES模块语法：

{
  "targets": {
    "build": {
      "executor": "@nx/next:build",
      "options": {
        // 保留原有配置
        "env": {
          "NODE_OPTIONS": "--experimental-specifier-resolution=node"
        }
      }
    },
    "serve": {
      "executor": "@nx/next:server",
      "options": {
        // 保留原有配置
        "env": {
          "NODE_OPTIONS": "--experimental-specifier-resolution=node"
        }
      }
    }
  }
}

4. 检查tsconfig.json #

确保tailwind.config.ts被包含在TS编译范围内，在tsconfig.json的include数组中添加：

{
  "include": [
    // 保留原有路径
    "tailwind.config.ts"
  ]
}

验证 #

重启开发服务器或重新执行构建命令，SyntaxError: Cannot use import statement outside a module错误应该消失，Tailwind的TS配置可正常生效。

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