Skip to content

Commit df696a1

Browse files
jitsjits
authored
Merge pull request #27 from FullStacksDev/styles-tailwind-refactor
Upgrades + refactor to make Tailwind CSS v4 play nice with Angular Material
2 parents 65ba580 + 80d3af4 commit df696a1

11 files changed

+673
-606
lines changed

‎ARCHITECTURE.md

+25-2
Original file line numberDiff line numberDiff line change
@@ -333,12 +333,35 @@ The [`app/src/app/app.component.ts`](./app/src/app/app.component.ts) file contai
333333

334334
| **:brain: Design decision** |
335335
| :-- |
336-
| We use [Angular Material](https://material.angular.io/) (with Material 3) for UI components, and [Tailwind CSS](https://tailwindcss.com/) for styling. You can still create your own UI components or add in other libraries, if needed. You can also customize Tailwind CSS as you wish, using v4's [CSS-first configuration](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration). |
336+
| We use [Angular Material](https://material.angular.io/) (with Material 3) and [Tailwind CSS](https://tailwindcss.com/) for styling. We split the styling set-up into separate files so they are processed separately, so Tailwind doesn't clash with the Sass (SCSS) processing for Angular Material.<br><br>You can still create your own UI components or add in other libraries, if needed. You can also customize Tailwind CSS as you wish, using v4's [CSS-first configuration](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration). |
337337

338-
The [`app/src/styles.scss`](./app/src/styles.scss) file sets up both Angular Material (with a basic Material 3 theme with custom background and text colors) and Tailwind CSS styling. Styles are provided for headings and paragraphs (`h1`-`h6` and `p` tags) as Angular Material no longer provides these out of the box. We also provide styling overrides to make Angular Material work okay with the Tailwind CSS base styles.
338+
The split set-up consists of:
339+
340+
- The [`app/src/styles.scss`](./app/src/styles.scss) file — the entrypoint for all styles, which imports our `tailwind.css` file (more below) and sets up Angular Material with a basic Material 3 theme with custom background and foreground colors.
341+
- This is where you customize Angular Material to your liking.
342+
- Here, we also provide default styles for headings and paragraphs (`h1`-`h6` and `p` tags) as Angular Material no longer provides these out of the box.
343+
- We also provide styling overrides to make Angular Material work well with the Tailwind CSS base styles.
344+
- The [`app/src/tailwind.css`](./app/src/tailwind.css) file — everything needed for the Tailwind CSS set up.
345+
- This is where you customize Tailwind CSS to your liking.
346+
- This is also where you put all custom styling that builds on top of Tailwind CSS (e.g. using `@apply`).
347+
- Here, we've set up the Tailwind utilities to be marked as `!important`. This is so we can easily use them in our templates to override all other styling (as that's usually the purpose of using utility classes in templates). In particular, so they can override Angular Material component styles, when needed (see note below).
339348

340349
You can import and use Angular Material components within your components as usual (see the [docs](https://material.angular.io/)). And you can use Tailwind CSS classes in your HTML and SCSS files as you wish (see the [docs](https://tailwindcss.com/docs)).
341350

351+
Typically, you'll want to put your custom global classes and styles in the `tailwind.css` file as you'll likely want to use Tailwind capabilities (like `@apply`) to build up your styles. Note that you can still refer to Angular Material's CSS variables in your Tailwind CSS styles.
352+
353+
> [!NOTE]
354+
>
355+
> We have this split set-up in place because [Tailwind does not work well with preprocessors like Sass](https://tailwindcss.com/docs/compatibility#sass-less-and-stylus).
356+
357+
> [!NOTE]
358+
>
359+
> We use the trick of marking _all_ Tailwind utilities as `!important` because of the way Angular Material emits the styling for components — it puts the styles in the `<head>` of the page in `<style>` blocks, and there's no way to tell it to put them within a CSS cascade layer (which would've been the better way to do this).<br><br>This is not an ideal set-up; there's an open issue on the Angular Material repo to maybe support CSS cascade layers in the future: <https://github.com/angular/components/issues/26451>, which would make this workaround unnecessary.
360+
361+
> [!IMPORTANT]
362+
>
363+
> Because we want all Tailwind utilities to be marked up with `!important`, when defining your own [custom utilities (using Tailwind’s `@utility` directive)](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities) make sure to add `!important` to your rules too. This is annoying, unfortunately, but it's the only way to ensure your custom utilities always take priority just like how the default Tailwind utilities have been set up.
364+
342365
## [`app`] State management using NgRx Signals
343366

344367
| **:brain: Design decision** |

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ This template gives you an empty app skeleton, working end-to-end, with the foll
2525
- State management using NgRx Signals.
2626
- Global auth store and auth guard.
2727
- Login flow using [Firebase Auth's Email Link](https://firebase.google.com/docs/auth/web/email-link-auth).
28-
- Angular Material and Tailwind CSS, with styling overrides to make them work well together.
28+
- Angular Material and Tailwind CSS, with a split set-up, higher priority utilities, and styling overrides to make them work well together.
2929
- Helpers to inject Firebase services into Angular components, services, etc.
3030
- [RxFire](https://github.com/FirebaseExtended/rxfire) for Observable wrappers for Firebase access in the frontend.
3131
- Frontend logging using [consola](https://github.com/unjs/consola).

‎app/.postcssrc.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
"plugins": {
33
"@tailwindcss/postcss": {}
44
}
5-
}
5+
}

‎app/.prettierrc

+1-1
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

+5-5
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,24 @@
4949
"@angular/cli": "^19.1.6",
5050
"@angular/compiler-cli": "^19.1.5",
5151
"@ngrx/eslint-plugin": "^19.0.1",
52-
"@tailwindcss/postcss": "^4.0.0",
52+
"@tailwindcss/postcss": "^4.0.5",
5353
"@types/express": "^5.0.0",
5454
"@types/jasmine": "~5.1.5",
5555
"@types/node": "^22.13.1",
5656
"angular-eslint": "^19.0.2",
57-
"eslint": "^9.19.0",
57+
"eslint": "^9.20.0",
5858
"eslint-config-prettier": "^10.0.1",
59-
"jasmine-core": "~5.5.0",
59+
"jasmine-core": "~5.6.0",
6060
"karma": "~6.4.4",
6161
"karma-chrome-launcher": "~3.2.0",
6262
"karma-coverage": "~2.2.0",
6363
"karma-jasmine": "~5.1.0",
6464
"karma-jasmine-html-reporter": "~2.1.0",
6565
"ng-mocks": "^14.13.2",
6666
"postcss": "^8.4.49",
67-
"prettier": "^3.4.2",
67+
"prettier": "^3.5.0",
6868
"prettier-plugin-tailwindcss": "^0.6.11",
69-
"tailwindcss": "^4.0.0",
69+
"tailwindcss": "^4.0.5",
7070
"typescript": "~5.7.3",
7171
"typescript-eslint": "^8.23.0"
7272
},

0 commit comments

Comments
 (0)