$theme does not exist in your theme config

Question

Im getting this $theme does not exist in your theme config issue in that first line that seemingly came out of nowhere. This code snippet is in app\node_modules@angular\material\input_input-theme.scss. I was tinkering around trying to change some default material input styling but I am not sure what caused this. How do I fix this?

@mixin theme($theme) {
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
    @if inspection.get-theme-version($theme) == 1 {
      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
    }
    @else {
      @include base($theme);
      @if inspection.theme-has($theme, color) {
        @include color($theme);
      }
      @if inspection.theme-has($theme, density) {
        @include density($theme);
      }
      @if inspection.theme-has($theme, typography) {
        @include typography($theme);
      }
    }
  }
}

Answer 1

This is caused by the TailwindCSS linter misinterpreting your mixin as a call to the Tailwind theme() function. If you are using VS Code, this issue shows how you can disable the error by modifying your settings:

{
  "tailwindCSS.lint.invalidConfigPath": "ignore"
}