Upgrades + refactor to make Tailwind CSS v4 play nice with Angular Material

Author: jits

app/.prettierrc

@@ -1,5 +1,5 @@
 {
   "printWidth": 100,
-  "tailwindConfig": "./tailwind.config.js",
+  "tailwindStylesheet": "./src/tailwind.css",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

app/package.json

@@ -42,32 +42,32 @@
     "rxfire": "^6.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.8.1",
-    "type-fest": "^4.33.0",
+    "type-fest": "^4.34.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^19.1.6",
     "@angular/cli": "^19.1.6",
     "@angular/compiler-cli": "^19.1.5",
     "@ngrx/eslint-plugin": "^19.0.1",
-    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.5",
     "@types/express": "^5.0.0",
     "@types/jasmine": "~5.1.5",
     "@types/node": "^22.13.1",
     "angular-eslint": "^19.0.2",
-    "eslint": "^9.19.0",
+    "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.0.1",
-    "jasmine-core": "~5.5.0",
+    "jasmine-core": "~5.6.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-mocks": "^14.13.2",
     "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^4.0.5",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.23.0"
   },

app/pnpm-lock.yaml

@@ -2,51 +2,35 @@
 // For more information: https://material.angular.io/guide/theming
 @use "@angular/material" as mat;
 
-html {
-  background: var(--mat-sys-surface);
-  color: var(--mat-sys-on-surface);
-
-  @include mat.theme(
-    (
-      color: (
-        theme-type: light,
-        primary: mat.$azure-palette,
-        tertiary: mat.$blue-palette,
-      ),
-      typography: Roboto,
-      density: 0,
-    ),
-    $overrides: (
-      // Custom background and foreground colors
-      surface: var(--color-slate-50),
-      on-surface: var(--color-slate-900)
-    )
-  );
-}
-
-@import "tailwindcss";
+@import "./tailwind.css"; // This is importing our local Tailwind CSS file
 
 @layer base {
-  /*
-    The default border color has changed to `currentColor` in Tailwind CSS v4,
-    so we've added these compatibility styles to make sure everything still
-    looks the same as it did with Tailwind CSS v3.
-
-    If we ever want to remove these styles, we need to add an explicit border
-    color utility to any element that depends on these defaults.
-  */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+  html {
+    background: var(--mat-sys-surface);
+    color: var(--mat-sys-on-surface);
+
+    @include mat.theme(
+      (
+        color: (
+          theme-type: light,
+          primary: mat.$azure-palette,
+          tertiary: mat.$blue-palette,
+        ),
+        typography: Roboto,
+        density: 0,
+      ),
+      $overrides: (
+        // Custom background and foreground colors
+        surface: var(--color-slate-50),
+        on-surface: var(--color-slate-900)
+      )
+    );
   }
 
-  // Uncomment this out to help debug
-  // * {
-  //   outline: solid 1px red;
-  // }
+  /* Uncomment this out to help debug */
+  /* * {
+    outline: solid 1px red;
+  } */
 
   html,
   body {
@@ -87,8 +71,8 @@ html {
     font: var(--mat-sys-body-large);
   }
 
-  // ----------------------------------
-  // Make Angular Material and Tailwind play nice
+  /* ---------------------------------- */
+  /* Make Angular Material and Tailwind play nice */
 
   .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field
     .mdc-notched-outline__notch {
@@ -114,5 +98,5 @@ html {
     border: none;
   }
 
-  // ----------------------------------
+  /* ---------------------------------- */
 }

app/src/styles.scss

@@ -0,0 +1,23 @@
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities) important;
+
+@layer base {
+  /*
+    The default border color has changed to `currentColor` in Tailwind CSS v4,
+    so we've added these compatibility styles to make sure everything still
+    looks the same as it did with Tailwind CSS v3.
+
+    If we ever want to remove these styles, we need to add an explicit border
+    color utility to any element that depends on these defaults.
+  */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

app/src/tailwind.css

@@ -28,13 +28,13 @@
   },
   "devDependencies": {
     "@firebase/rules-unit-testing": "^4.0.1",
-    "eslint": "^9.19.0",
+    "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.0.1",
     "firebase-functions-test": "^3.4.0",
     "firebase-tools": "^13.30.0",
     "globals": "^15.14.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.23.0",
     "vitest": "^3.0.5"