[Angular] Problem with recompilng Tailwind classes in dev mode

[maciekkoz98]

Hi,
I have a problem with Tailwind 3.4.1 when I use dev mode in my Angular v.16.2.12 app. It seems that Tailwind does not find changes and does not recompile css after save.
It can refresh styles only once when I delete .angular folder, which keeps the cache. After that styles are not updated, so for example when I add a new color to the button, it becomes black, as the color is not added to the css.
The problem does not occur when I build the app with ng build.

In my tailwind.config.js I am overriding screens and extending theme colors:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    relative: true,
    files: [
      "./src/**/*.{html,ts}"
    ]
  },
  theme: {
    extend: {
      colors: {
        "ultra-light-indigo": "#f4f7ff",
        "dark-gray": "#3F3F46",
        "primary-color": { // cyan
          20: "#19314D",
          40: "#36669C",
          60: "#59A7FF",
          80: "#9FCCFF"
        },
        "neutrals": {
          10: "#25272D",
          20: "#33373F",
          40: "#5C6270",
          60: "#7F94A3",
          80: "#C2C7D6",
          90: "#DBE0F0",
          95: "#F1F3FA",
          100: "#FBFBFC"
        },
        "success": {
          60: "#16803C",
          
        },
        "error": {
          60: "#F23030",
          100: "#FEEAEA"
        }
      },
    },
    screens: {
      sm: "640px",
      md: "1024px",
      lg: "1440px",
      xl: "1920px",
    },
  },
  plugins: [],
}

I am wondering if it is possible that any other package might interfere with the Tailwind:

"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"
  }