Angular组件引入Tailwind指令后，保存时样式更新失效问题

问题背景 #

在模块联邦的Angular微应用中，将Tailwind指令（@tailwind base;/components/utilities）引入组件级样式文件（src/app/my-component/my-component.scss）时，首次ng build能正常生成所有Tailwind类，但在模板中新增类后，Tailwind不会重新构建新样式。全局引入到/src/styles.css可正常工作，但该方案会影响未使用Tailwind的主应用，因此不可行。

解决方案 #

1. 更新Tailwind配置，监控组件文件变化 #

修改tailwind.config.js的content数组，确保覆盖微应用所有组件的模板、TS和样式文件，让Tailwind能实时检测到模板中新增的类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{html,ts,scss}", // 覆盖微应用内所有组件相关文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 调整Angular构建配置，确保热更新触发 #

在微应用的angular.json中，修改build配置，确保组件样式和模板的变化能触发Tailwind重新编译：

• 开启stylePreprocessorOptions，确保Tailwind配置能被组件样式文件识别：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他配置...
    "stylePreprocessorOptions": {
      "includePaths": ["./"]
    },
    "cache": false // 禁用构建缓存，避免样式更新被缓存拦截
  }
}

• 确保组件的styleUrls正确指向对应的SCSS文件，且该文件仅在微应用组件中引入。

3. 模块联邦隔离配置 #

针对模块联邦场景，确保微应用的样式配置完全独立于主应用：

• 微应用的angular.json中styles数组只包含自身的样式文件，不引用主应用的styles.css；
• 微应用的Tailwind配置仅作用于自身代码，主应用不受任何影响。

4. 验证热更新效果 #

启动ng serve --watch后，在组件模板中新增Tailwind类（如bg-red-500），检查浏览器是否能加载新增的样式，同时确认主应用未引入Tailwind相关代码。

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