Angular+Tailwind CSS样式热重载失效问题求助

• 扩展Tailwind配置的content扫描范围
  如果你的组件在TypeScript代码里通过[ngClass]动态绑定Tailwind类，默认配置可能漏掉了.ts文件，导致Tailwind无法扫描到这些新类。修改tailwind.config.js：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{html,scss,ts}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 将Tailwind导入移至全局样式文件
  不要在app.component.scss中重复导入Tailwind的基础、组件、工具类，而是统一移到项目根目录的src/styles.scss（全局样式文件）中，全局仅导入一次：

  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
  

  之后删除app.component.scss里的这三行导入，避免组件级导入引发的热重载缓存冲突。

• 清理Angular构建缓存
  Angular的构建缓存可能导致Tailwind新类无法及时更新，执行以下命令清理缓存并重启开发服务：

  ng cache clean
  ng serve --no-cache
  

• 检查版本兼容性
  确认Tailwind CSS版本与Angular版本兼容，Tailwind v3.x要求Angular 12及以上版本，版本不匹配可能引发热重载异常。

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