Angular 17中如何从自定义包引用Tailwind颜色配置？

问题场景 #

我正在开发基于Angular 17、用Tailwind CSS做样式的应用，引用了自行开发的Angular包，包里导出了颜色配置常量：

// 自定义包中的代码
export const myColors = {
  'customcolor': {
    200: "#...",
    // 其他色阶
  }
}

尝试在应用的Tailwind配置中直接使用这个常量：

// 应用的tailwind.config.ts
import type {Config} from 'tailwindcss'
import {myColors} from "@me/my-package";

export default {
  content: [
    "./src/**/*.{html,ts}"
  ],
  theme: {
    colors: myColors
  }
} satisfies Config

触发了Angular编译错误：

X [ERROR] The injectable 'PlatformNavigation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping. [plugin angular-sass]

已尝试Tailwind预设方案和在main.ts顶部导入@angular/compiler，均无效，需解决从自定义包获取颜色配置给Tailwind使用的问题。

问题根源 #

自定义Angular包是AOT编译后的库，而Tailwind配置文件在构建时由Node.js环境执行，直接导入Angular库的导出会触发Angular依赖注入相关代码加载，导致JIT编译需求的报错——因为Tailwind配置不属于Angular应用的编译上下文，无法处理Angular库的注入逻辑。

正确解决方法：剥离纯JS/TS模块的颜色配置 #

不要把颜色常量放在Angular库的主代码里，单独抽成无Angular依赖的纯TypeScript模块，让Tailwind配置可以安全导入：

1. 调整自定义包结构
   在自定义包中新建纯TS文件（比如src/lib/color-config.ts），存放颜色配置：

   // src/lib/color-config.ts
   export const myColors = {
     'customcolor': {
       200: "#...",
       // 其他色阶
     }
   };
   
   // 若需在Angular组件中使用，可在原有服务/模块文件中重新导出
   // export { myColors } from './color-config';
   

2. 确保包编译正确处理纯模块
   检查包的tsconfig.lib.json，确保该纯TS文件被包含在编译范围内，编译为纯JS代码（而非带Angular装饰器的组件/服务代码）。

3. 在应用Tailwind配置中导入纯模块
   直接导入无依赖的颜色配置：

   // 应用的tailwind.config.ts
   import type {Config} from 'tailwindcss';
   // 导入纯模块的颜色配置，而非Angular库的主导出
   import {myColors} from "@me/my-package/color-config";
   
   export default {
     content: [
       "./src/**/*.{html,ts}"
     ],
     theme: {
       colors: myColors
     }
   } satisfies Config;
   

备选方案：独立发布颜色配置包 #

如果自定义包规模较大，可将颜色配置单独发布为小的纯JS/TS包（比如@me/my-colors），让Angular应用和Tailwind配置都能独立导入，完全规避Angular库的依赖问题。

为何之前的预设方案无效？ #

之前的预设方案本质还是导入了Angular库的导出，同样会触发Angular依赖注入代码加载，所以和直接导入颜色常量的问题一致，必须剥离成纯模块才能解决。

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