Angular项目中通过TS文件配置Tailwind主题出现ES模块错误如何解决

报错根因 #

你遇到的报错由两个兼容问题共同导致：

1. 项目根目录package.json配置了"type": "module"，所有.js后缀文件会被Node默认识别为ES模块，但你使用的tailwindcss@3.0.5版本加载配置时使用CommonJS规范的require()语法，无法加载ES模块文件
2. 你直接在.js配置文件中导入.ts格式的主题文件，Node原生运行时不会自动解析TypeScript语法，会触发额外报错

解决步骤（可同时保留TS类型提示、主题值复用能力） #

步骤1：修改Tailwind配置文件后缀 #

将根目录的tailwind.config.js重命名为tailwind.config.cjs，.cjs后缀会被Node强制识别为CommonJS模块，不需要修改package.json的"type": "module"配置。

步骤2：处理TS主题文件的导入 #

我们采用预编译TS主题为JS+类型声明文件的方案，兼顾配置加载和后续TS代码复用：

• 首先在package.json的scripts字段中新增主题编译命令，把主题编译逻辑嵌入原有启动、构建流程中：

{
  "scripts": {
    "build:theme": "tsc src/theme/theme.ts --declaration --outDir src/theme",
    "start": "npm run build:theme && ng serve",
    "build": "npm run build:theme && ng build"
  }
}

执行npm run build:theme后会在src/theme目录下生成两个文件：

• theme.js：编译后的JS格式主题配置，可直接被CommonJS模块加载
• theme.d.ts：TS类型声明文件，后续在Angular代码中导入主题时可正常获得类型提示
• 修改tailwind.config.cjs的导入和导出语法为CommonJS规范：

// tailwind.config.cjs
const theme = require('./src/theme/theme.js')

module.exports = {
  darkMode: false,
  theme: theme.default ?? theme // 兼容TS默认导出的编译结果
}

步骤3：验证主题复用 #

后续在Angular服务、组件等TS代码中，依然可以直接导入原TS主题文件，类型提示和值复用能力不受影响：

// 任意Angular服务/组件文件
import theme from 'src/theme/theme'

@Injectable()
export class ThemeService {
  getPrimaryColor() {
    return theme.colors.blue // 可正常获得TS类型提示
  }
}

可选优化方案 #

如果不想每次启动项目都预编译主题，可以升级tailwindcss到3.2.0及以上版本，该版本原生支持TS格式的配置文件，直接将配置文件改为tailwind.config.ts即可直接导入TS主题，无需额外编译步骤。

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