Angular 16开发模式下Tailwind类无法重新编译的问题

开发模式下，Tailwind无法检测文件更改，保存后不会重新编译CSS。只有删除缓存所在的.angular文件夹后，应用启动时样式能刷新一次，但后续样式修改不再生效——例如给按钮添加新自定义颜色时，按钮会显示黑色，因为新颜色未被加入编译后的CSS文件。使用ng build构建应用时该问题不会出现。

我的Tailwind配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    relative: true,
    files: [
      "./src/**/*.{html,ts}"
    ]
  },
  theme: {
    extend: {
      colors: {
        "ultra-light-indigo": "#...",
        "dark-gray": "#...",
        "primary-color": { // cyan
          20: "#...",
          40: "#...",
          60: "#...",
          80: "#..."
        },
        "neutrals": {
          10: "#...",
          20: "#...",
          40: "#...",
          60: "#...",
          80: "#...",
          90: "#...",
          95: "#...",
          100: "#..."
        },
        "success": {
          60: "#...",
          
        },
        "error": {
          60: "#...",
          100: "#..."
        }
      },
    },
    screens: {
      sm: "640px",
      md: "1024px",
      lg: "1440px",
      xl: "1920px",
    },
  },
  plugins: [],
}

项目依赖 #

生产依赖 #

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/cdk": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/localize": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@azure/msal-angular": "^3.0.5",
    "@azure/msal-browser": "^3.2.0",
    "@fortawesome/angular-fontawesome": "^0.13.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "font-awesome": "^4.7.0",
    "angular-i18next": "^16.0.0",
    "i18next": "^22.4.15",
    "lodash-es": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0",
    "cookieconsent": "^3.1.1",
    "ngx-cookieconsent": "^4.0.2"
  }

开发依赖 #

"devDependencies": {
    "@angular-devkit/build-angular": "^16.2.12",
    "@angular/cli": "^16.2.12",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "@types/lodash-es": "^4.17.10",
    "@types/googlemaps": "^3.43.3",
    "autoprefixer": "^10.4.18",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "~5.1.3"
  }

已尝试的操作 #

• 删除.angular缓存文件夹：仅能在应用启动时刷新一次样式，后续修改仍无热更新
• 新应用复现测试：复制主应用部分内容后问题出现，回滚修改后问题依然存在

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