Skip to content

Commit f91ef2f

Browse files
jitsjits
committed
Upgrades + refactor to make Tailwind CSS v4 play nice with Angular Material
1 parent f461dd8 commit f91ef2f

File tree

7 files changed

+719
-682
lines changed

7 files changed

+719
-682
lines changed

‎app/.prettierrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"printWidth": 100,
3-
"tailwindConfig": "./tailwind.config.js",
3+
"tailwindStylesheet": "./src/tailwind.css",
44
"plugins": ["prettier-plugin-tailwindcss"]
55
}

‎app/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,32 +42,32 @@
4242
"rxfire": "^6.1.0",
4343
"rxjs": "~7.8.0",
4444
"tslib": "^2.8.1",
45-
"type-fest": "^4.33.0",
45+
"type-fest": "^4.34.1",
4646
"zone.js": "~0.15.0"
4747
},
4848
"devDependencies": {
4949
"@angular-devkit/build-angular": "^19.1.6",
5050
"@angular/cli": "^19.1.6",
5151
"@angular/compiler-cli": "^19.1.5",
5252
"@ngrx/eslint-plugin": "^19.0.1",
53-
"@tailwindcss/postcss": "^4.0.0",
53+
"@tailwindcss/postcss": "^4.0.5",
5454
"@types/express": "^5.0.0",
5555
"@types/jasmine": "~5.1.5",
5656
"@types/node": "^22.13.1",
5757
"angular-eslint": "^19.0.2",
58-
"eslint": "^9.19.0",
58+
"eslint": "^9.20.0",
5959
"eslint-config-prettier": "^10.0.1",
60-
"jasmine-core": "~5.5.0",
60+
"jasmine-core": "~5.6.0",
6161
"karma": "~6.4.4",
6262
"karma-chrome-launcher": "~3.2.0",
6363
"karma-coverage": "~2.2.0",
6464
"karma-jasmine": "~5.1.0",
6565
"karma-jasmine-html-reporter": "~2.1.0",
6666
"ng-mocks": "^14.13.2",
6767
"postcss": "^8.5.1",
68-
"prettier": "^3.4.2",
68+
"prettier": "^3.5.0",
6969
"prettier-plugin-tailwindcss": "^0.6.11",
70-
"tailwindcss": "^4.0.0",
70+
"tailwindcss": "^4.0.5",
7171
"typescript": "~5.7.3",
7272
"typescript-eslint": "^8.23.0"
7373
},

‎app/pnpm-lock.yaml

Lines changed: 329 additions & 309 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/src/styles.scss

Lines changed: 22 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -2,117 +2,28 @@
22
// For more information: https://material.angular.io/guide/theming
33
@use "@angular/material" as mat;
44

5-
html {
6-
background: var(--mat-sys-surface);
7-
color: var(--mat-sys-on-surface);
8-
9-
@include mat.theme(
10-
(
11-
color: (
12-
theme-type: light,
13-
primary: mat.$azure-palette,
14-
tertiary: mat.$blue-palette,
5+
@import "./tailwind.css"; // This is importing our local Tailwind CSS file
6+
7+
@layer components {
8+
html {
9+
background: var(--mat-sys-surface);
10+
color: var(--mat-sys-on-surface);
11+
12+
@include mat.theme(
13+
(
14+
color: (
15+
theme-type: light,
16+
primary: mat.$azure-palette,
17+
tertiary: mat.$blue-palette,
18+
),
19+
typography: Roboto,
20+
density: 0,
1521
),
16-
typography: Roboto,
17-
density: 0,
18-
),
19-
$overrides: (
20-
// Custom background and foreground colors
21-
surface: var(--color-slate-50),
22-
on-surface: var(--color-slate-900)
23-
)
24-
);
25-
}
26-
27-
@import "tailwindcss";
28-
29-
@layer base {
30-
/*
31-
The default border color has changed to `currentColor` in Tailwind CSS v4,
32-
so we've added these compatibility styles to make sure everything still
33-
looks the same as it did with Tailwind CSS v3.
34-
35-
If we ever want to remove these styles, we need to add an explicit border
36-
color utility to any element that depends on these defaults.
37-
*/
38-
*,
39-
::after,
40-
::before,
41-
::backdrop,
42-
::file-selector-button {
43-
border-color: var(--color-gray-200, currentColor);
44-
}
45-
46-
// Uncomment this out to help debug
47-
// * {
48-
// outline: solid 1px red;
49-
// }
50-
51-
html,
52-
body {
53-
height: 100%;
54-
margin: 0;
55-
}
56-
57-
body {
58-
font-family: Roboto, "Helvetica Neue", sans-serif;
59-
margin: 0;
60-
}
61-
62-
h1 {
63-
font: var(--mat-sys-headline-large);
64-
}
65-
66-
h2 {
67-
font: var(--mat-sys-headline-medium);
68-
}
69-
70-
h3 {
71-
font: var(--mat-sys-headline-small);
72-
}
73-
74-
h4 {
75-
font: var(--mat-sys-title-large);
76-
}
77-
78-
h5 {
79-
font: var(--mat-sys-title-medium);
80-
}
81-
82-
h6 {
83-
font: var(--mat-sys-title-small);
22+
$overrides: (
23+
// Custom background and foreground colors
24+
surface: var(--color-slate-50),
25+
on-surface: var(--color-slate-900)
26+
)
27+
);
8428
}
85-
86-
p {
87-
font: var(--mat-sys-body-large);
88-
}
89-
90-
// ----------------------------------
91-
// Make Angular Material and Tailwind play nice
92-
93-
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field
94-
.mdc-notched-outline__notch {
95-
border-right-style: hidden;
96-
}
97-
98-
[type="text"],
99-
[type="email"],
100-
[type="url"],
101-
[type="password"],
102-
[type="number"],
103-
[type="date"],
104-
[type="datetime-local"],
105-
[type="month"],
106-
[type="search"],
107-
[type="tel"],
108-
[type="time"],
109-
[type="week"],
110-
[multiple],
111-
textarea,
112-
select {
113-
padding: 0;
114-
border: none;
115-
}
116-
117-
// ----------------------------------
11829
}

‎app/src/tailwind.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import "tailwindcss";
2+
3+
@layer base {
4+
/*
5+
The default border color has changed to `currentColor` in Tailwind CSS v4,
6+
so we've added these compatibility styles to make sure everything still
7+
looks the same as it did with Tailwind CSS v3.
8+
9+
If we ever want to remove these styles, we need to add an explicit border
10+
color utility to any element that depends on these defaults.
11+
*/
12+
*,
13+
::after,
14+
::before,
15+
::backdrop,
16+
::file-selector-button {
17+
border-color: var(--color-gray-200, currentColor);
18+
}
19+
20+
/* Uncomment this out to help debug */
21+
/* * {
22+
outline: solid 1px red;
23+
} */
24+
25+
html,
26+
body {
27+
height: 100%;
28+
margin: 0;
29+
}
30+
31+
body {
32+
font-family: Roboto, "Helvetica Neue", sans-serif;
33+
margin: 0;
34+
}
35+
36+
h1 {
37+
font: var(--mat-sys-headline-large);
38+
}
39+
40+
h2 {
41+
font: var(--mat-sys-headline-medium);
42+
}
43+
44+
h3 {
45+
font: var(--mat-sys-headline-small);
46+
}
47+
48+
h4 {
49+
font: var(--mat-sys-title-large);
50+
}
51+
52+
h5 {
53+
font: var(--mat-sys-title-medium);
54+
}
55+
56+
h6 {
57+
font: var(--mat-sys-title-small);
58+
}
59+
60+
p {
61+
font: var(--mat-sys-body-large);
62+
}
63+
64+
/* ---------------------------------- */
65+
/* Make Angular Material and Tailwind play nice */
66+
67+
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field
68+
.mdc-notched-outline__notch {
69+
border-right-style: hidden;
70+
}
71+
72+
[type="text"],
73+
[type="email"],
74+
[type="url"],
75+
[type="password"],
76+
[type="number"],
77+
[type="date"],
78+
[type="datetime-local"],
79+
[type="month"],
80+
[type="search"],
81+
[type="tel"],
82+
[type="time"],
83+
[type="week"],
84+
[multiple],
85+
textarea,
86+
select {
87+
padding: 0;
88+
border: none;
89+
}
90+
91+
/* ---------------------------------- */
92+
}

‎firebase/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828
},
2929
"devDependencies": {
3030
"@firebase/rules-unit-testing": "^4.0.1",
31-
"eslint": "^9.19.0",
31+
"eslint": "^9.20.0",
3232
"eslint-config-prettier": "^10.0.1",
3333
"firebase-functions-test": "^3.4.0",
3434
"firebase-tools": "^13.30.0",
3535
"globals": "^15.14.0",
3636
"npm-run-all": "^4.1.5",
37-
"prettier": "^3.4.2",
37+
"prettier": "^3.5.0",
3838
"typescript": "~5.7.3",
3939
"typescript-eslint": "^8.23.0",
4040
"vitest": "^3.0.5"

0 commit comments

Comments
 (0)